[data-seg=source]{--seg:#7c3aed}[data-seg=medium]{--seg:#db2777}[data-seg=campaign]{--seg:#d97706}[data-seg=content]{--seg:#0891b2}[data-seg=done]{--seg:#16a34a}.ub-hero{width:min(100%,560px);height:440px;position:relative}.ub-hero:before{content:"";background:radial-gradient(circle at 30% 30%,#ede9fe,#0000 60%),radial-gradient(circle at 80% 80%,#fce7f3,#0000 60%);border-radius:36px;position:absolute;inset:30px 10px 30px 40px;rotate:-3deg}.ub-browser{z-index:1;background:#fff;border-radius:20px;padding:14px 14px 18px;animation:6s ease-in-out infinite ub-bob;position:absolute;top:60px;left:0;right:0;box-shadow:0 30px 60px -30px #0f172a73}@keyframes ub-bob{50%{translate:0 -7px}}.ub-bar{align-items:flex-start;gap:10px;display:flex}.ub-dots{flex:none;gap:5px;padding-top:11px;display:flex}.ub-dots i{background:#fda4af;border-radius:50%;width:10px;height:10px}.ub-dots i:nth-child(2){background:#fcd34d}.ub-dots i:nth-child(3){background:#86efac}.ub-url{color:#334155;word-break:break-all;background:#f1f5f9;border-radius:12px;flex-wrap:wrap;align-items:center;gap:4px 2px;min-width:0;padding:8px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.5;display:flex}.ub-url>svg{color:#16a34a;flex:none;margin-right:4px}.ub-seg{background:color-mix(in srgb, var(--seg) 14%, #fff);box-shadow:inset 0 -2px 0 var(--seg);color:color-mix(in srgb, var(--seg) 70%, #0f172a);animation:ub-pop .5s var(--d) both cubic-bezier(.34, 1.56, .64, 1);border-radius:6px;padding:1px 6px}.ub-seg b{font-weight:800}@keyframes ub-pop{0%{opacity:0;scale:.6}}.ub-labels{flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:14px;display:flex}.ub-label{border-radius:var(--r-pill);background:var(--seg);color:#fff;animation:ub-pop .5s var(--d) both cubic-bezier(.34, 1.56, .64, 1);padding:6px 12px;font-size:12.5px;font-weight:800}.ub-report{z-index:2;color:#fff;background:#0f172a;border-radius:18px;gap:8px;width:250px;padding:16px;animation:5s ease-in-out -2s infinite ub-bob;display:grid;position:absolute;bottom:20px;left:20px;rotate:-3deg;box-shadow:0 30px 50px -25px #0f172ab3}.ub-report b{font-size:14px}.ub-row{grid-template-columns:84px 1fr;align-items:center;gap:8px;display:grid}.ub-row small{color:#cbd5e1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px}.ub-row i{width:var(--w);transform-origin:0;height:10px;animation:ub-grow .8s var(--d) both var(--ease);background:linear-gradient(90deg,#a78bfa,#f472b6);border-radius:6px;display:block}@keyframes ub-grow{0%{scale:0 1}}.ub-float{z-index:3;border-radius:var(--r-pill);color:#0f172a;background:#fff;align-items:center;gap:6px;padding:8px 13px;font-size:13.5px;font-weight:700;animation:4.5s ease-in-out infinite ub-bob;display:inline-flex;position:absolute;box-shadow:0 16px 30px -18px #0f172a73}.ub-float svg{color:#7c3aed}.ub-float[data-i="0"]{top:10px;right:30px}.ub-float[data-i="1"]{color:#fff;background:#7c3aed;animation-delay:-1.6s;bottom:60px;right:10px}.ub-float[data-i="1"] svg{color:#fff}.ub-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;margin:0;padding:0;list-style:none;display:grid}.ub-step{background:var(--surface);box-shadow:inset 0 0 0 1px var(--border), 0 5px 0 color-mix(in srgb, var(--seg) 70%, #fff);transition:transform .25s var(--ease);border-radius:22px;flex-direction:column;display:flex;position:relative}.ub-step:hover{transform:translateY(-5px)}.ub-step-photo{aspect-ratio:5/4;border-radius:22px 22px 0 0;max-width:100%;position:relative;overflow:hidden}.ub-step-photo img{object-fit:cover}.ub-step-chip{box-shadow:inset 0 -2px 0 var(--seg);white-space:nowrap;text-overflow:ellipsis;color:color-mix(in srgb, var(--seg) 70%, #0f172a);background:#fffffff0;border-radius:10px;padding:6px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:700;position:absolute;bottom:10px;left:10px;right:10px;overflow:hidden}.ub-step-copy{padding:14px 16px 20px}.ub-step-n{letter-spacing:.06em;text-transform:uppercase;color:var(--seg);font-size:12px;font-weight:800}.ub-step-copy h3{font-family:var(--font-display);color:var(--heading);margin:4px 0 6px;font-size:clamp(14.5px,13.404px + .281vw,17px)}.ub-step-copy p{color:var(--text-2);margin:0;font-size:14px;line-height:1.5}.ub-step-arrow{z-index:1;color:#94a3b8;position:absolute;top:38%;right:-24px}.ub-cheats{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;display:grid}.ub-cheat{border-top:5px solid var(--seg);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--elev-1);flex-direction:column;gap:10px;padding:18px;display:flex}.ub-cheat code{background:color-mix(in srgb, var(--seg) 12%, #fff);color:color-mix(in srgb, var(--seg) 75%, #0f172a);border-radius:8px;align-self:flex-start;padding:4px 10px;font-size:13px;font-weight:800}.ub-cheat b{font-family:var(--font-display);color:var(--heading);font-size:clamp(14.5px,13.404px + .281vw,17px)}.ub-cheat-list{flex-wrap:wrap;gap:6px;display:flex}.ub-cheat-list span{border-radius:var(--r-pill);align-items:center;gap:4px;padding:4px 9px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;display:inline-flex}.ub-cheat-list[data-kind=good] span{color:#166534;background:#dcfce7}.ub-cheat-list[data-kind=bad] span{color:#991b1b;background:#fee2e2;-webkit-text-decoration:line-through #991b1b66;text-decoration:line-through #991b1b66}@media (max-width:1000px){.ub-steps,.ub-cheats{grid-template-columns:repeat(2,minmax(0,1fr))}.ub-step-arrow{display:none}}@media (max-width:900px){.ub-hero{height:400px}}@media (max-width:640px){.ub-hero{height:360px}.ub-browser{top:40px}.ub-url{font-size:11.5px}.ub-report{width:210px;bottom:10px;left:0}.ub-float[data-i="0"]{top:0;right:0}.ub-float[data-i="1"]{bottom:20px;right:0}.ub-steps,.ub-cheats{scroll-snap-type:x mandatory;scrollbar-width:none;gap:12px;margin-inline:-16px;padding:4px 16px 16px;scroll-padding-inline:16px;display:flex;overflow-x:auto}.ub-steps::-webkit-scrollbar{display:none}.ub-cheats::-webkit-scrollbar{display:none}.ub-step,.ub-cheat{scroll-snap-align:start;flex:0 0 76%}.ub-step:hover{transform:none}}@media (prefers-reduced-motion:reduce){.ub-browser,.ub-seg,.ub-label,.ub-report,.ub-row i,.ub-float{animation:none}}