.wb{gap:var(--space-md);flex-direction:column;display:flex}.wb__label{font-size:var(--text-sm);color:var(--text-strong);font-weight:600}.wb__select{border-radius:var(--radius-pill);width:min(100%,22rem);color:var(--text-strong);font-size:var(--text-base);background:#f6f6fc;background:lab(97.0276% .880659 -2.8775);border:1.5px solid #ffffffb3;border:1.5px solid lab(100% 0 0/.7);padding:.7rem 1.15rem;box-shadow:inset 0 2px 6px #807b9c29;box-shadow:inset 0 2px 6px lab(53.0545% 7.36576 -17.0993/.16)}.wb__select:focus-visible{border-color:var(--aurora-cyan);box-shadow:inset 0 2px 6px #807b9c29, 0 0 0 3px var(--accent-soft);outline:none}@supports (color:lab(0% 0 0)){.wb__select:focus-visible{box-shadow:inset 0 2px 6px lab(53.0545% 7.36576 -17.0993/.16), 0 0 0 3px var(--accent-soft)}}.wb__grid{gap:var(--space-lg);margin-top:var(--space-sm);grid-template-columns:340px minmax(0,1fr);align-items:start;display:grid}@media (max-width:760px){.wb__grid{grid-template-columns:1fr}}.wb__sub{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-faint);margin-bottom:.5rem}.wb__iframe{width:320px;max-width:100%;height:170px;box-shadow:var(--shadow-lg);border:0;border-radius:14px}.wb__code-head{justify-content:space-between;align-items:center;gap:var(--space-sm);display:flex}.wb__copy{border-radius:var(--radius-pill);min-height:44px;font-size:var(--text-sm);color:var(--text-on-accent);background:var(--accent-strong);transition:background-color var(--duration-fast) var(--ease-out-expo);padding:.5rem 1.1rem;font-weight:600}.wb__copy:hover{background:var(--accent-strong-hover)}.wb__copy:focus-visible{outline:3px solid var(--accent-strong);outline-offset:3px}.wb__code{padding:var(--space-md);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);font-family:var(--font-mono,ui-monospace, monospace);color:#d3d7e5;color:lab(85.9406% .90906 -7.48836);white-space:pre-wrap;word-break:break-all;background:#1b1e2e;background:lab(11.5745% 2.24278 -10.8822);border:1.5px solid #ffffff0f;border:1.5px solid lab(100% 0 0/.06);margin:0;font-size:.78rem;line-height:1.55;overflow-x:auto}.wb__note{font-size:var(--text-sm);color:var(--text-muted);margin-top:.6rem}.wb__status{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.wb-steps{gap:var(--space-md);margin:var(--space-lg) 0 0;grid-template-columns:1fr;padding:0;list-style:none;display:grid}@media (min-width:48rem){.wb-steps{grid-template-columns:repeat(3,1fr)}}.wb-step{gap:var(--space-xs);padding:var(--space-lg);flex-direction:column;display:flex}.wb-step__icon{border-radius:var(--radius-sm);width:2.75rem;height:2.75rem;color:color-mix(in oklch, var(--accent-strong), var(--text-strong) 25%);background:color-mix(in oklch, var(--accent-strong) 12%, transparent);justify-content:center;align-items:center;display:inline-flex}.wb-step__icon svg{width:24px;height:24px}.wb-step__body{font-size:var(--text-sm);color:var(--text-muted);margin:0;line-height:1.65}.wb-step__body strong{color:var(--text-strong)}