.soap-bubble-surface,.soap-bubble-toggle,.soap-bubble-slider{--soap-bubble-fallback-palette:linear-gradient(135deg, var(--soap-bubble-soap-highlight-color,transparent), transparent 65%), linear-gradient(0deg, var(--soap-bubble-soap-shade-color,transparent), transparent 65%), var(--soap-bubble-custom-palette,linear-gradient(transparent, transparent)), linear-gradient(var(--soap-bubble-soap-color,transparent), var(--soap-bubble-soap-color,transparent)), linear-gradient(var(--soap-bubble-tint,transparent), var(--soap-bubble-tint,transparent))}.soap-bubble-surface{isolation:isolate;border-radius:var(--soap-bubble-radius,1.5em);box-shadow:var(--soap-bubble-shadow,0 1em 2.25em -.875em #00000024);position:relative}.soap-bubble-surface-canvas,.soap-bubble-control-canvas{pointer-events:none;opacity:0;display:block;position:absolute}.soap-bubble-surface-canvas{z-index:-1;width:calc(100% + 24px);height:calc(100% + 24px);inset:-12px}.soap-bubble-control-canvas{inset:calc(var(--soap-bubble-control-bleed) * -1);z-index:0;width:calc(100% + var(--soap-bubble-control-bleed) * 2);height:calc(100% + var(--soap-bubble-control-bleed) * 2)}[data-soap-bubble-ready]>.soap-bubble-surface-canvas,[data-soap-bubble-ready]>.soap-bubble-control-canvas{opacity:1}.soap-bubble-surface:not([data-soap-bubble-ready]){background:var(--soap-bubble-fallback-palette), #ffffff47;-webkit-backdrop-filter:blur(18px)saturate(1.6);backdrop-filter:blur(18px)saturate(1.6)}.soap-bubble-button{min-height:2.75em;color:inherit;font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:0 0;border:0;justify-content:center;align-items:center;gap:.5em;padding:0 1.25em;font-weight:600;display:inline-flex}.soap-bubble-surface.soap-bubble-button{--soap-bubble-shadow:none}.soap-bubble-button:focus-visible,.soap-bubble-toggle:focus-visible{outline-offset:3px;outline:2px solid}.soap-bubble-slider:has(.soap-bubble-slider-input:focus-visible){outline-offset:3px;outline:2px solid}.soap-bubble-menu>.soap-bubble-button:focus-visible,.soap-bubble-menu-item:focus-visible,.soap-bubble-search-input:focus-visible{outline:none}.soap-bubble-button:disabled{cursor:not-allowed;opacity:.55}.soap-bubble-toggle{isolation:isolate;vertical-align:middle;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:9999px;flex:none;padding:0;display:inline-block;position:relative}.soap-bubble-toggle-thumb{z-index:1;width:var(--soap-bubble-thumb-width);height:var(--soap-bubble-thumb-height);pointer-events:none;border-radius:9999px;transition:width .14s cubic-bezier(.2,.8,.3,1),height .14s cubic-bezier(.2,.8,.3,1),box-shadow .25s;position:absolute;top:50%;left:0;box-shadow:0 .1875em .5em #00000029,0 .0625em .0625em #0000000f}.soap-bubble-toggle:not([data-soap-bubble-ready])>.soap-bubble-toggle-thumb:before{content:"";border-radius:inherit;background:var(--soap-bubble-fallback-palette), #fff;position:absolute;inset:0}.soap-bubble-toggle[data-soap-bubble-ready]>.soap-bubble-toggle-thumb{box-shadow:none}.soap-bubble-toggle[data-soap-bubble-ready][data-lens]>.soap-bubble-toggle-thumb{width:calc(var(--soap-bubble-thumb-width) * 1.55);height:calc(var(--soap-bubble-thumb-height) * 1.6);transition-duration:.14s,.14s,.25s;transition-timing-function:cubic-bezier(.3,1.5,.5,1)}.soap-bubble-toggle:not([data-soap-bubble-ready]){background:#78788038}.soap-bubble-toggle:not([data-soap-bubble-ready])[aria-checked=true]{background:var(--soap-bubble-toggle-color)}.soap-bubble-toggle:disabled{cursor:not-allowed;opacity:.55}.soap-bubble-slider{isolation:isolate;touch-action:pan-y;width:100%;min-width:7.5rem;display:block;position:relative}.soap-bubble-slider-thumb{z-index:1;width:var(--soap-bubble-thumb-width);height:var(--soap-bubble-thumb-height);pointer-events:none;border-radius:9999px;transition:width .28s cubic-bezier(.3,1.5,.5,1),height .28s cubic-bezier(.3,1.5,.5,1);position:absolute;top:50%;transform:translate(-50%,-50%)}.soap-bubble-slider[data-active] .soap-bubble-slider-thumb{width:calc(var(--soap-bubble-thumb-width) * 1.45);height:calc(var(--soap-bubble-thumb-height) * 1.45)}.soap-bubble-slider:not([data-soap-bubble-ready]) .soap-bubble-slider-thumb{background:var(--soap-bubble-fallback-palette), #fff;box-shadow:0 .375em .875em -.375em #00000059}.soap-bubble-slider-input{z-index:2;opacity:0;cursor:pointer;appearance:none;width:100%;height:100%;margin:0;position:absolute;inset:0}.soap-bubble-slider-input::-webkit-slider-thumb{width:var(--soap-bubble-thumb-width);height:var(--soap-bubble-thumb-height);appearance:none}.soap-bubble-slider-input::-moz-range-thumb{width:var(--soap-bubble-thumb-width);height:var(--soap-bubble-thumb-height);border:0}.soap-bubble-slider[data-disabled]{opacity:.55}.soap-bubble-icon-button.soap-bubble-button{width:2.75em;height:2.75em;padding:0;font-weight:400}.soap-bubble-icon-button svg{width:1.25em;height:1.25em}.soap-bubble-surface.soap-bubble-button{transition:scale .45s cubic-bezier(.3,1.6,.5,1)}.soap-bubble-surface.soap-bubble-button:active:not(:disabled){scale:calc(1 + .275 * min(var(--soap-bubble-wobble,.4), 1.6));transition-duration:.25s}.soap-bubble-search{align-items:center;gap:.55em;height:2.75em;padding:0 1.1em 0 .775em;display:flex}.soap-bubble-surface.soap-bubble-search,.soap-bubble-surface.soap-bubble-menu-panel{--soap-bubble-shadow:none}.soap-bubble-search-icon{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;opacity:.55;flex:none;width:1.2em;height:1.2em}.soap-bubble-search-input{min-width:0;color:inherit;font:inherit;appearance:none;background:0 0;border:0;outline:0;flex:1;padding:0}.soap-bubble-search-input::placeholder{color:inherit;opacity:.5}.soap-bubble-search-input::-webkit-search-cancel-button{-webkit-appearance:none}.soap-bubble-menu{display:inline-block;position:relative}.soap-bubble-menu[data-open]>.soap-bubble-button{opacity:0}.soap-bubble-menu-panel{z-index:20;contain:layout style;position:absolute;top:0;left:0}.soap-bubble-menu:not([data-open]) .soap-bubble-menu-panel{display:none}.soap-bubble-menu[data-state=open] .soap-bubble-menu-content{animation:.26s cubic-bezier(.2,.7,.3,1) both soap-bubble-menu-focus}.soap-bubble-menu[data-state=closing] .soap-bubble-menu-content{animation:.12s ease-in both soap-bubble-menu-blur}.soap-bubble-menu[data-state=open] .soap-bubble-menu-echo{animation:70ms ease-in both soap-bubble-menu-blur}.soap-bubble-menu[data-state=closing] .soap-bubble-menu-echo{animation:.2s ease-out both soap-bubble-menu-focus}@keyframes soap-bubble-menu-focus{0%,25%{opacity:0;filter:blur(4px)}to{opacity:1;filter:blur()}}@keyframes soap-bubble-menu-blur{to{opacity:0;filter:blur(4px)}}.soap-bubble-menu-panel>.soap-bubble-surface-canvas{width:calc(135% + 24px);height:calc(135% + 24px)}.soap-bubble-menu[data-align=end] .soap-bubble-menu-panel>.soap-bubble-surface-canvas{left:auto;right:-12px}.soap-bubble-menu[data-align=end] .soap-bubble-menu-panel{left:auto;right:0}.soap-bubble-menu-echo{pointer-events:none;place-items:center;display:grid;position:absolute;top:0;left:0}.soap-bubble-menu[data-align=end] .soap-bubble-menu-echo{left:auto;right:0}.soap-bubble-menu-clip{border-radius:inherit;transform-origin:0 0;position:absolute;inset:0;overflow:hidden}.soap-bubble-menu-clip,.soap-bubble-menu-content{will-change:transform}.soap-bubble-menu[data-align=end] .soap-bubble-menu-clip{transform-origin:100% 0}.soap-bubble-menu-content{transform-origin:0 0;flex-direction:column;width:max-content;min-width:8.5em;padding:.3em;display:flex;position:absolute;top:0;left:0}.soap-bubble-menu[data-align=end] .soap-bubble-menu-content{transform-origin:100% 0;left:auto;right:0}.soap-bubble-menu-highlight{pointer-events:none;background:#00000021;border-radius:9999px;transition:transform .3s cubic-bezier(.3,1.3,.5,1),height .3s cubic-bezier(.3,1.3,.5,1),opacity .15s;position:absolute;top:0;left:.3em;right:.3em}.soap-bubble-menu-item{z-index:1;color:inherit;line-height:1.2;font:inherit;text-align:left;white-space:nowrap;cursor:pointer;background:0 0;border:0;border-radius:9999px;align-items:center;gap:.75em;padding:.55em 1.5em .55em .75em;display:flex;position:relative}.soap-bubble-menu-item:disabled{cursor:default;opacity:.45}.soap-bubble-menu-icon{place-items:center;width:1.25em;display:inline-grid}.soap-bubble-menu-icon svg{width:1.15em;height:1.15em}@media (prefers-reduced-motion:reduce){.soap-bubble-slider-thumb,.soap-bubble-toggle-thumb,.soap-bubble-toggle-thumb:before,.soap-bubble-surface.soap-bubble-button,.soap-bubble-menu-highlight{transition:none}.soap-bubble-menu[data-state] .soap-bubble-menu-content,.soap-bubble-menu[data-state] .soap-bubble-menu-echo{animation:none}}:where([data-theme=dark]) .soap-bubble-surface{--soap-bubble-shadow:0 1em 2.375em -1em #000000b3, 0 .0625em .125em #0006}:where([data-theme=dark]) .soap-bubble-menu-highlight{background:#ffffff21}:where([data-theme=dark]) .soap-bubble-surface:not([data-soap-bubble-ready]){background:var(--soap-bubble-fallback-palette), #ffffff14}@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light])) .soap-bubble-surface{--soap-bubble-shadow:0 1em 2.375em -1em #000000b3, 0 .0625em .125em #0006}:where(:root:not([data-theme=light])) .soap-bubble-menu-highlight{background:#ffffff21}:where(:root:not([data-theme=light])) .soap-bubble-surface:not([data-soap-bubble-ready]){background:var(--soap-bubble-fallback-palette), #ffffff14}}.component-showcase .component-preview-stage:has(>.soap-bubble-system-demo){--component-background-preview-height:44rem;padding:0}.soap-bubble-system-demo{color:#1b1d22;background:#f7f7f8;position:relative;overflow:hidden}.soap-bubble-panel-tabs{gap:1.5rem}.soap-bubble-component-card:focus-visible{outline:2px solid var(--theme-ink);outline-offset:3px}.soap-bubble-control-panel{grid-column:1/-1;min-width:0}.soap-bubble-control-panel[hidden]{display:none}.soap-bubble-component-grid{grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:1.125rem;padding:.25rem;display:grid}.component-controls .soap-bubble-component-card{border:1px solid var(--theme-border);background:var(--theme-background);min-width:0;color:var(--theme-ink);text-align:left;cursor:pointer;border-radius:1.25rem;gap:0;padding:.4rem;display:grid;overflow:hidden}.component-controls .soap-bubble-component-card:hover,.component-controls .soap-bubble-component-card[aria-pressed=true]{border-color:var(--theme-ink-muted)}.soap-bubble-component-card img{aspect-ratio:7/4;object-fit:cover;background:#000;border-radius:.9rem;width:100%;height:auto;display:block}.soap-bubble-component-card>span{padding:.75rem .45rem .55rem;font-size:.75rem;font-weight:500;line-height:1.2}.component-showcase .component-background-preview.soap-bubble-system-demo>*{width:auto;height:auto}.soap-bubble-system-demo[data-theme=dark]{color:#f2f3f7;background:#000}.component-showcase .soap-bubble-system-demo>.soap-bubble-system-controls{gap:1.7em;width:min(21.75em,90%);display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.component-showcase:not(.is-fullscreen):not(:where(.studio-viewer-frame[data-viewer] *)):has(.soap-bubble-system-demo:not([data-preview=showcase])){min-height:0}.component-preview-canvas:has(>.component-preview-stage>.soap-bubble-system-demo:not([data-preview=showcase])){min-height:0}.component-showcase:not(.is-fullscreen):not(:where(.studio-viewer-frame[data-viewer] *)) .component-preview-stage:has(>.soap-bubble-system-demo:not([data-preview=showcase])){height:auto}.component-showcase:not(.is-fullscreen):not(:where(.studio-viewer-frame[data-viewer] *)) .soap-bubble-system-demo:not([data-preview=showcase]){box-sizing:border-box;height:auto;padding-block:max(4rem, calc(var(--soap-bubble-preview-font-size) * 2))}.component-showcase:not(.is-fullscreen):not(:where(.studio-viewer-frame[data-viewer] *)) .soap-bubble-system-demo:not([data-preview=showcase])>.soap-bubble-system-controls{margin-inline:auto;position:relative;top:auto;left:auto;transform:none}.component-showcase:not(.is-fullscreen):not(:where(.studio-viewer-frame[data-viewer] *)) .soap-bubble-system-demo[data-preview=menu]{padding-block:max(4rem, calc(var(--soap-bubble-preview-font-size) * 4))}.soap-bubble-system-top{z-index:2;gap:.6em;display:grid;position:relative}.soap-bubble-system-bar{z-index:2;align-items:center;gap:.55em;display:flex;position:relative}.soap-bubble-system-camera{margin-left:auto}.soap-bubble-system-controls:not([data-preview=showcase]) .soap-bubble-system-bar,.soap-bubble-system-controls:not([data-preview=showcase]) .soap-bubble-system-row{justify-content:center}.soap-bubble-system-controls:not([data-preview=showcase]) .soap-bubble-system-camera{margin-left:0}.soap-bubble-system-new{color:#0b2a14}.soap-bubble-system-row{justify-content:space-between;align-items:center;gap:min(1.1rem,.63em);display:flex}.soap-bubble-system-add.soap-bubble-button{width:2.75em;font-size:inherit;padding:0}.soap-bubble-system-add{font-weight:400}.soap-bubble-system-add-glyph{font-size:1.5em;line-height:1}.soap-bubble-system-pop{--pop-burst:70ms;display:inline-grid;position:relative}.soap-bubble-system-pop[data-state=bursting]>.soap-bubble-system-close{animation:soap-bubble-system-burst calc(var(--pop-burst) + 20ms) cubic-bezier(.5, 0, 1, 1) both}.soap-bubble-system-pop[data-state=gone]>.soap-bubble-system-close{visibility:hidden}.soap-bubble-system-close[data-reborn]{animation:.32s cubic-bezier(.2,.7,.3,1) soap-bubble-system-blow}.soap-bubble-system-close:disabled{opacity:1}.soap-bubble-system-burst{pointer-events:none;contain:layout style;position:absolute;inset:0}.soap-bubble-system-burst>*{opacity:0;will-change:transform, opacity;position:absolute}.soap-bubble-system-drop{left:calc(50% + var(--drop-x));top:calc(50% + var(--drop-y));width:var(--drop-size);height:var(--drop-size);transform:var(--drop-a);background:#fffffff2;border-radius:50%}.soap-bubble-system-pop[data-state] .soap-bubble-system-drop{animation:soap-bubble-system-drop var(--drop-duration) linear calc(var(--pop-burst) + var(--drop-delay)) forwards}.soap-bubble-system-demo[data-theme=light] .soap-bubble-system-drop{background:#969ca8d9}.soap-bubble-system-mini{width:var(--mini-size);height:var(--mini-size);--mini-rim:#ffffffb3;background:radial-gradient(circle at 31% 27%, #fffffff2 0 8%, transparent 17%), radial-gradient(circle at 70% 75%, #fff6 0 5%, transparent 11%), radial-gradient(closest-side, transparent 66%, var(--mini-rim) 97%, transparent 100%), conic-gradient(from 200deg, #ff6ec86b, #6ebeff6b, #ffe16e61, #82ffbe61, #ff6ec86b);transform:var(--mini-a);border-radius:50%;top:50%;left:50%;-webkit-mask:radial-gradient(closest-side,#00000047 58%,#000 90%,#0000 100%);mask:radial-gradient(closest-side,#00000047 58%,#000 90%,#0000 100%)}.soap-bubble-system-pop[data-state] .soap-bubble-system-mini{animation:soap-bubble-system-mini var(--mini-duration) linear calc(var(--pop-burst) + var(--mini-delay)) forwards}.soap-bubble-system-demo[data-theme=light] .soap-bubble-system-mini{--mini-rim:#7880918c}@keyframes soap-bubble-system-mini{0%{opacity:0;transform:var(--mini-a)}4%{opacity:1;transform:var(--mini-b)}10%{transform:var(--mini-c)}20%{transform:var(--mini-d)}40%{transform:var(--mini-e)}70%{transform:var(--mini-f)}94%{opacity:1}to{opacity:0;transform:var(--mini-g)}}@keyframes soap-bubble-system-burst{75%{opacity:1;transform:scale(1.07)}76%,to{opacity:0;transform:scale(1.07)}}@keyframes soap-bubble-system-drop{0%{opacity:var(--drop-alpha);transform:var(--drop-a)}20%{transform:var(--drop-b)}50%{opacity:var(--drop-alpha);transform:var(--drop-c)}to{opacity:0;transform:var(--drop-d)}}@keyframes soap-bubble-system-blow{0%{opacity:0;transform:scale(.18)}}@media (prefers-reduced-motion:reduce){.soap-bubble-system-pop[data-state] .soap-bubble-system-burst>*,.soap-bubble-system-close[data-reborn]{animation:none}}