:is(.btn,.btn-link)[data-size="2xs"]{--btn-h:var(--size-control-2xs);--btn-px:10px;--btn-gap:var(--space-4);--btn-icon:var(--size-icon-sm);--btn-r:10px}:is(.btn,.btn-link)[data-size=xs]{--btn-h:var(--size-control-xs);--btn-px:var(--space-12);--btn-gap:var(--space-4);--btn-icon:var(--size-icon-sm);--btn-r:12px}:is(.btn,.btn-link)[data-size=sm]{--btn-h:var(--size-control-sm);--btn-px:var(--space-16);--btn-gap:var(--space-4);--btn-icon:var(--size-icon-sm);--btn-r:16px}:is(.btn,.btn-link)[data-size=md]{--btn-h:var(--size-control-md);--btn-px:var(--space-20);--btn-gap:var(--space-8);--btn-icon:var(--size-icon-md);--btn-r:20px}:is(.btn,.btn-link)[data-size=lg]{--btn-h:var(--size-control-lg);--btn-px:var(--space-24);--btn-gap:var(--space-8);--btn-icon:var(--size-icon-lg);--btn-r:20px}:is(.btn,.btn-link)[data-size=xl]{--btn-h:var(--size-control-xl);--btn-px:var(--space-32);--btn-gap:var(--space-8);--btn-icon:var(--size-icon-lg);--btn-r:24px}:is(.btn,.btn-link)[data-size="2xl"]{--btn-h:var(--size-control-2xl);--btn-px:var(--space-40);--btn-gap:var(--space-12);--btn-icon:var(--size-icon-xl);--btn-r:28px}.btn[data-shape=pill]{--btn-r:var(--radius-full)}.btn[data-type=brand]{--btn-rest-fill:var(--fill-brand);--btn-rest-border:transparent;--btn-rest-label:var(--content-on-brand);--btn-rest-icon:var(--content-on-brand);--btn-rest-shade:var(--btn-shade-on);--btn-hover-fill:var(--fill-brand-hover);--btn-hover-border:transparent;--btn-hover-label:var(--content-on-brand);--btn-hover-icon:var(--content-on-brand);--btn-hover-shade:var(--btn-shade-on);--btn-pressed-fill:var(--fill-brand-active);--btn-pressed-border:transparent;--btn-pressed-label:var(--content-on-brand);--btn-pressed-icon:var(--content-on-brand);--btn-pressed-shade:var(--btn-shade-on);--btn-disabled-fill:var(--fill-brand-disabled);--btn-disabled-border:transparent;--btn-disabled-label:var(--content-on-brand-disabled);--btn-disabled-icon:var(--content-on-brand-disabled);--btn-disabled-shade:var(--btn-shade-on)}.btn[data-type=primary]{--btn-rest-fill:var(--fill-inverse);--btn-rest-border:transparent;--btn-rest-label:var(--content-inverse-primary);--btn-rest-icon:var(--content-inverse-primary);--btn-rest-shade:var(--btn-shade-on);--btn-hover-fill:var(--fill-inverse-hover);--btn-hover-border:transparent;--btn-hover-label:var(--content-inverse-primary);--btn-hover-icon:var(--content-inverse-primary);--btn-hover-shade:var(--btn-shade-on);--btn-pressed-fill:var(--fill-inverse-active);--btn-pressed-border:transparent;--btn-pressed-label:var(--content-inverse-primary);--btn-pressed-icon:var(--content-inverse-primary);--btn-pressed-shade:var(--btn-shade-on);--btn-disabled-fill:var(--fill-secondary-disabled);--btn-disabled-border:transparent;--btn-disabled-label:var(--content-primary-disabled);--btn-disabled-icon:var(--content-primary-disabled);--btn-disabled-shade:var(--btn-shade-on)}.btn[data-type=secondary]{--btn-rest-fill:var(--fill-secondary);--btn-rest-border:var(--border-secondary);--btn-rest-label:var(--content-primary);--btn-rest-icon:var(--content-primary);--btn-rest-shade:var(--btn-shade-on);--btn-hover-fill:var(--fill-secondary-hover);--btn-hover-border:var(--border-brand);--btn-hover-label:var(--content-primary);--btn-hover-icon:var(--border-brand);--btn-hover-shade:var(--btn-shade-on);--btn-pressed-fill:var(--fill-secondary-active);--btn-pressed-border:var(--border-brand);--btn-pressed-label:var(--content-primary);--btn-pressed-icon:var(--border-brand);--btn-pressed-shade:var(--btn-shade-on);--btn-disabled-fill:var(--fill-secondary-disabled);--btn-disabled-border:var(--border-secondary-disabled);--btn-disabled-label:var(--content-primary-disabled);--btn-disabled-icon:var(--content-primary-disabled);--btn-disabled-shade:var(--btn-shade-on)}.btn[data-type=tertiary]{--btn-rest-fill:var(--fill-tertiary);--btn-rest-border:var(--border-tertiary);--btn-rest-label:var(--content-primary);--btn-rest-icon:var(--content-primary);--btn-rest-shade:var(--btn-shade-on);--btn-hover-fill:var(--fill-tertiary-hover);--btn-hover-border:var(--border-brand);--btn-hover-label:var(--content-primary);--btn-hover-icon:var(--border-brand);--btn-hover-shade:var(--btn-shade-on);--btn-pressed-fill:var(--fill-tertiary-active);--btn-pressed-border:var(--border-brand);--btn-pressed-label:var(--content-primary);--btn-pressed-icon:var(--border-brand);--btn-pressed-shade:var(--btn-shade-on);--btn-disabled-fill:var(--fill-tertiary-disabled);--btn-disabled-border:var(--border-tertiary-disabled);--btn-disabled-label:var(--content-primary-disabled);--btn-disabled-icon:var(--content-primary-disabled);--btn-disabled-shade:var(--btn-shade-on)}.btn[data-type=outline]{--btn-rest-fill:transparent;--btn-rest-border:var(--border-secondary);--btn-rest-label:var(--content-primary);--btn-rest-icon:var(--content-primary);--btn-rest-shade:0 0 transparent;--btn-hover-fill:var(--fill-secondary);--btn-hover-border:var(--border-brand);--btn-hover-label:var(--content-primary);--btn-hover-icon:var(--border-brand);--btn-hover-shade:var(--btn-shade-on);--btn-pressed-fill:var(--fill-secondary-hover);--btn-pressed-border:var(--border-brand);--btn-pressed-label:var(--content-primary);--btn-pressed-icon:var(--border-brand);--btn-pressed-shade:var(--btn-shade-on);--btn-disabled-fill:transparent;--btn-disabled-border:var(--border-secondary-disabled);--btn-disabled-label:var(--content-primary-disabled);--btn-disabled-icon:var(--content-primary-disabled);--btn-disabled-shade:0 0 transparent}.btn[data-type=ghost]{--btn-rest-fill:transparent;--btn-rest-border:transparent;--btn-rest-label:var(--content-primary);--btn-rest-icon:var(--content-primary);--btn-rest-shade:0 0 transparent;--btn-hover-fill:var(--fill-secondary);--btn-hover-border:var(--border-brand);--btn-hover-label:var(--content-primary);--btn-hover-icon:var(--border-brand);--btn-hover-shade:var(--btn-shade-on);--btn-pressed-fill:var(--fill-secondary-hover);--btn-pressed-border:var(--border-brand);--btn-pressed-label:var(--content-primary);--btn-pressed-icon:var(--border-brand);--btn-pressed-shade:var(--btn-shade-on);--btn-disabled-fill:transparent;--btn-disabled-border:transparent;--btn-disabled-label:var(--content-primary-disabled);--btn-disabled-icon:var(--content-primary-disabled);--btn-disabled-shade:0 0 transparent}.btn[data-type=brand-tone]{--btn-rest-fill:var(--fill-brand-secondary);--btn-rest-border:transparent;--btn-rest-label:var(--content-brand);--btn-rest-icon:var(--content-brand);--btn-rest-shade:var(--btn-shade-on);--btn-hover-fill:var(--fill-brand-secondary-hover);--btn-hover-border:transparent;--btn-hover-label:var(--content-brand);--btn-hover-icon:var(--content-brand);--btn-hover-shade:var(--btn-shade-on);--btn-pressed-fill:var(--fill-brand-secondary-active);--btn-pressed-border:transparent;--btn-pressed-label:var(--content-brand);--btn-pressed-icon:var(--content-brand);--btn-pressed-shade:var(--btn-shade-on);--btn-disabled-fill:var(--fill-brand-secondary-disabled);--btn-disabled-border:transparent;--btn-disabled-label:var(--content-brand-disabled);--btn-disabled-icon:var(--content-brand-disabled);--btn-disabled-shade:var(--btn-shade-on)}.btn[data-type=brand-ghost]{--btn-rest-fill:transparent;--btn-rest-border:transparent;--btn-rest-label:var(--content-brand);--btn-rest-icon:var(--content-brand);--btn-rest-shade:0 0 transparent;--btn-hover-fill:var(--fill-brand-secondary);--btn-hover-border:transparent;--btn-hover-label:var(--content-brand);--btn-hover-icon:var(--content-brand);--btn-hover-shade:var(--btn-shade-on);--btn-pressed-fill:var(--fill-brand-secondary-hover);--btn-pressed-border:transparent;--btn-pressed-label:var(--content-brand);--btn-pressed-icon:var(--content-brand);--btn-pressed-shade:var(--btn-shade-on);--btn-disabled-fill:transparent;--btn-disabled-border:transparent;--btn-disabled-label:var(--content-brand-disabled);--btn-disabled-icon:var(--content-brand-disabled);--btn-disabled-shade:0 0 transparent}.btn-link[data-type=brand]{--btn-rest-label:var(--content-brand);--btn-rest-icon:var(--content-brand);--btn-hover-label:var(--content-brand-hover);--btn-hover-icon:var(--content-brand-hover);--btn-pressed-label:var(--content-brand-active);--btn-pressed-icon:var(--content-brand-active);--btn-disabled-label:var(--content-brand-disabled);--btn-disabled-icon:var(--content-brand-disabled)}.btn-link[data-type=neutral]{--btn-rest-label:var(--content-primary);--btn-rest-icon:var(--content-primary);--btn-hover-label:var(--content-secondary);--btn-hover-icon:var(--content-secondary);--btn-pressed-label:var(--content-tertiary);--btn-pressed-icon:var(--content-tertiary);--btn-disabled-label:var(--content-primary-disabled);--btn-disabled-icon:var(--content-primary-disabled)}:where(.btn){all:unset}.btn{box-sizing:border-box;position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--btn-gap);height:var(--btn-h);padding:0 var(--btn-px);border-radius:var(--btn-r);white-space:nowrap;cursor:pointer;--btn-fill:var(--btn-rest-fill);--btn-border:var(--btn-rest-border);--btn-label:var(--btn-rest-label);--btn-icon-colour:var(--btn-rest-icon);--btn-shade-on:inset 0 -4px 10px rgba(0,0,0,0.5);--btn-shade:var(--btn-rest-shade,var(--btn-shade-on));background:var(--btn-fill);color:var(--btn-label);box-shadow:inset 0 0 0 var(--stroke-1) var(--btn-border),var(--btn-shade);transition:background var(--duration-fast) var(--easing-standard),box-shadow var(--duration-fast) var(--easing-standard),color var(--duration-fast) var(--easing-standard)}.btn[data-icon-only]{width:var(--btn-h);padding:0}.btn[data-block]{width:100%;min-width:0}.btn[data-block] .btn-label{overflow:hidden;text-overflow:ellipsis}.btn-icon{width:var(--btn-icon);height:var(--btn-icon);flex:none;background:var(--btn-icon-colour);-webkit-mask:var(--icon) center /contain no-repeat;mask:var(--icon) center /contain no-repeat;transition:background var(--duration-fast) var(--easing-standard)}.btn:is(:hover,[data-state=hover]):not(:disabled){--btn-fill:var(--btn-hover-fill);--btn-border:var(--btn-hover-border);--btn-label:var(--btn-hover-label);--btn-icon-colour:var(--btn-hover-icon);--btn-shade:var(--btn-hover-shade,var(--btn-shade-on))}.btn:is(:active,[data-state=active]):not(:disabled){--btn-fill:var(--btn-pressed-fill);--btn-border:var(--btn-pressed-border);--btn-label:var(--btn-pressed-label);--btn-icon-colour:var(--btn-pressed-icon);--btn-shade:var(--btn-pressed-shade,var(--btn-shade-on))}.btn:disabled{cursor:default;--btn-fill:var(--btn-disabled-fill);--btn-border:var(--btn-disabled-border);--btn-label:var(--btn-disabled-label);--btn-icon-colour:var(--btn-disabled-icon);--btn-shade:var(--btn-disabled-shade,var(--btn-shade-on))}.btn:focus-visible{box-shadow:inset 0 0 0 var(--stroke-1) var(--btn-border),var(--btn-shade),0 0 0 var(--stroke-2) var(--border-focus)}.btn-spinner{position:relative;width:var(--btn-icon);height:var(--btn-icon);flex:none}.btn-spinner:before{content:"";position:absolute;inset:calc(var(--btn-icon) * (1 - var(--size-icon-grid-square)) / 2);box-sizing:border-box;border-radius:var(--radius-full);border:calc(var(--btn-icon) * var(--size-icon-grid-stroke)) solid var(--btn-icon-colour);border-top-color:transparent;animation:btn-spin .8s linear infinite}@keyframes btn-spin{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.btn-spinner:before{animation-duration:2.4s}}:where(.btn-link){all:unset}.btn-link{box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--btn-gap);cursor:pointer;white-space:nowrap;--btn-label:var(--btn-rest-label);--btn-icon-colour:var(--btn-rest-icon);color:var(--btn-label);transition:color var(--duration-fast) var(--easing-standard);border-radius:var(--radius-xs)}.btn-link:is(:hover,[data-state=hover]):not(:disabled,[aria-disabled]){--btn-label:var(--btn-hover-label);--btn-icon-colour:var(--btn-hover-icon)}.btn-link:is(:active,[data-state=active]):not(:disabled,[aria-disabled]){--btn-label:var(--btn-pressed-label);--btn-icon-colour:var(--btn-pressed-icon)}.btn-link:is(:disabled,[aria-disabled]){cursor:default;--btn-label:var(--btn-disabled-label);--btn-icon-colour:var(--btn-disabled-icon)}.btn-link:focus-visible{box-shadow:0 0 0 var(--stroke-2) var(--border-focus)}.seg{display:grid;grid-gap:var(--space-4);gap:var(--space-4);padding:var(--space-4);background:var(--surface-primary);box-shadow:inset 0 0 0 var(--stroke-1) var(--border-primary),inset 0 -4px 10px rgba(0,0,0,.5);border-radius:calc(var(--radius-lg) + var(--space-4))}.seg[data-size="2xs"]{border-radius:calc(10px + var(--space-4))}