.component-showcase{--field-border-width:1px;--border-width-field:var(--field-border-width);--field-border:var(--border);--field-border-hover:color-mix(in oklab, var(--field-border) 88%, var(--field-foreground,var(--foreground)) 10%);--field-border-focus:color-mix(in oklab, var(--field-border) 74%, var(--field-foreground,var(--foreground)) 22%);--sc-spring:linear(0, .008 1.1%, .031 2.2%, .129 4.8%, .257 7.2%, .671 14.2%, .789 16.5%, .881 18.6%, .957 20.7%, 1.019 22.9%, 1.063 25.1%, 1.094 27.4%, 1.109 30%, 1.107 32.8%, 1.084 38.4%, 1.032 47.9%, .997 59%, .986 76.9%, 1)}.component-showcase .card{background:var(--surface);border:1px solid color-mix(in oklab, var(--border) 50%, transparent);transition:box-shadow .28s cubic-bezier(.33,1,.68,1)}.component-showcase [data-tile]:hover .card{box-shadow:var(--overlay-shadow)}.component-showcase [data-tile]:hover{z-index:5}.component-showcase [data-docs-chip]{transition:scale .45s linear(0, .19 6%, .7 18%, 1.12 32%, 1.3 45%, 1.22 60%, 1.05 75%, .98 87%, 1);scale:.8}.component-showcase [data-tile]:hover [data-docs-chip]{scale:1}.component-showcase [data-tile]:has(:focus-visible) [data-docs-chip]{scale:1}.component-showcase .sc-tab-pill{pointer-events:none;z-index:0;border-radius:var(--radius-3xl);background:var(--segment);box-shadow:var(--shadow-surface);transition-property:translate,width,height;transition-duration:.25s;transition-timing-function:var(--ease-out-fluid);position:absolute;top:0;left:0}.component-showcase .sc-tabs .tabs__tab{z-index:1;position:relative}.component-showcase .sc-embedded-select .select__trigger{box-shadow:none;height:auto;min-height:0;background:0 0;border:0;padding-block:0;padding-inline-start:calc(var(--spacing) * 1.5);padding-inline-end:calc(var(--spacing) * 7)}.sc-embedded-pop{min-width:10rem}.sc-menu-pop{width:max-content;min-width:0}@media (prefers-reduced-motion:reduce){.sc-pop[data-entering=true],.sc-pop[data-exiting=true]{transition:none;animation:none}}.component-showcase .sc-stage-in{animation:.2s ease-out both sc-stage-in}.component-showcase .sc-stage-out{animation:.2s ease-out both sc-stage-out}@keyframes sc-stage-in{0%{opacity:0}to{opacity:1}}@keyframes sc-stage-out{0%{opacity:1}to{opacity:0}}.component-showcase .sc-seamless-field .input-group__prefix{border-right:none}.component-showcase .sc-seamless-field .input-group__suffix{border-left:none}.component-showcase .sc-chip-pop{animation:sc-chip-pop .35s var(--sc-spring)}@keyframes sc-chip-pop{0%{opacity:0;scale:.5}to{opacity:1;scale:1}}.component-showcase .sc-dupe-shake{animation:sc-dupe-shake .3s var(--ease-out)}@keyframes sc-dupe-shake{0%,to{translate:0}25%{translate:-4px}50%{translate:4px}75%{translate:-2px}}@media (prefers-reduced-motion:reduce){.component-showcase .card,.component-showcase [data-docs-chip],.component-showcase .sc-tab-pill{transition:none}.component-showcase [data-docs-chip]{scale:1}.component-showcase .sc-chip-pop,.component-showcase .sc-dupe-shake,.component-showcase .sc-stage-in,.component-showcase .sc-stage-out{animation:none}}
.mac-window{background:var(--background);border-radius:var(--radius-2xl);width:100%;position:relative}.mac-window:before{border:1px solid var(--border);border-radius:inherit;content:"";pointer-events:none;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 12%,#0000 88%);mask-image:linear-gradient(#000 12%,#0000 88%)}.mac-window .mw-titlebar{align-items:center;height:56px;padding-inline:20px;display:flex;position:relative}.mac-window .mw-dots{gap:8px;display:flex}.mac-window .mw-dot{border-radius:50%;justify-content:center;align-items:center;width:12px;height:12px;display:inline-flex;box-shadow:inset 0 0 0 1px #0000001f}.mac-window .mw-dot:before{opacity:0;font-size:9px;font-weight:600;line-height:1;transition:opacity .12s ease-out}.mac-window .mw-dots:hover .mw-dot:before{opacity:1}.mac-window .mw-close{background:#ff5f57}.mac-window .mw-close:before{color:#560001;color:lab(14.0188% 63.239 32.2023);content:"×"}.mac-window .mw-min{background:#febc2e}.mac-window .mw-min:before{color:#4b3100;color:lab(22.243% 24.5692 59.3736);content:"−"}.mac-window .mw-zoom{background:#28c840}.mac-window .mw-zoom:before{color:#003800;color:lab(19.944% -63.756 44.8735);content:"+"}.mac-window .mw-pill{background:color-mix(in oklab, var(--muted) 12%, transparent);color:var(--muted);white-space:nowrap;border-radius:9999px;align-items:center;gap:6px;height:24px;padding-inline:12px;font-size:12px;font-weight:500;display:inline-flex;position:absolute;top:50%;left:50%;translate:-50% -50%}.mac-window .mw-cluster{align-items:center;gap:10px;margin-left:auto;display:flex}.mac-window .mw-content{padding-bottom:48px;position:relative}@media (max-width:780px){.mac-window .mw-pill{display:none}}@media (max-width:560px){.mac-window .mw-titlebar{padding-inline:16px}.mac-window .mw-cluster{gap:4px}.mac-window .mw-cluster [data-slot=color-swatch-picker]{flex-wrap:nowrap;gap:2px}}@media (max-width:360px){.mac-window .mw-titlebar{padding-inline:12px}.mac-window .mw-cluster .button{width:28px;min-width:28px;height:28px}.mac-window .mw-cluster [data-slot=color-swatch-picker]{gap:1px}.mac-window .mw-cluster [data-slot=color-swatch-picker-item]{width:20px;height:20px}.mac-window .mw-cluster [data-slot=color-swatch-picker-swatch]{width:16px;height:16px}}@media (prefers-reduced-motion:reduce){.mac-window .mw-dot:before{transition:none}}