.bb-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px}.bb-controls .field>span{display:flex;justify-content:space-between;gap:12px}.bb-controls output{font-variant-numeric:tabular-nums;white-space:nowrap}.bb-controls input[type=range]{padding:8px 0;accent-color:var(--pref-primary,#175b47);width:100%;min-height:44px}.bb-sample{position:relative;overflow:clip;isolation:isolate;aspect-ratio:16/9;max-width:640px;width:100%;background:var(--pref-background,#f7f7ef);border:1px solid var(--line);border-radius:14px;margin:12px 0 20px}.bb-sample-shape{position:absolute;width:var(--bs-bg-size);left:var(--bs-bg-x);top:calc(var(--bs-bg-y) * .5);opacity:var(--bs-bg-opacity);transform:translateX(-50%);pointer-events:none}.bb-sample-shape svg{width:100%;height:auto;display:block}.bb-sample-content{position:relative;z-index:1;padding:28px;pointer-events:none}.bb-sample[data-device=mobile]{max-width:280px;aspect-ratio:3/4}.bb-sample[data-device=mobile] .bb-sample-shape{width:var(--bs-bg-size-mobile);left:var(--bs-bg-x-mobile);top:calc(var(--bs-bg-y-mobile) * .75);opacity:var(--bs-bg-opacity-mobile)}.bb-sample h3{font-size:clamp(18px,3vw,28px);max-width:80%;margin:16px 0}.bb-sample small{letter-spacing:1px}@media(max-width:700px){.bb-controls{grid-template-columns:1fr}.bb-sample-content{padding:20px}}