.button-lab{gap:var(--space-xl);padding-block-end:var(--space-3xl);display:grid}.button-lab__foundation-card,.button-lab__target-card,.button-lab__recipe-card{overflow:hidden}.button-lab__foundation-header,.button-lab__target-card,.button-lab__recipe-header,.button-lab__foundation-footer,.button-lab__override-footer{justify-content:space-between;align-items:flex-start;gap:var(--space-lg);display:flex}.button-lab__eyebrow{color:var(--color-brand);font-family:var(--font-display);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);letter-spacing:var(--font-letter-spacing-wider);text-transform:uppercase}.button-lab__section-title{color:var(--color-fg);font-family:var(--font-display);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);line-height:var(--font-line-height-xl);margin-block-start:var(--space-2xs)}.button-lab__section-copy{max-width:44rem;color:var(--color-fg-muted);font-size:var(--font-size-sm);line-height:var(--font-line-height-sm);margin-block-start:var(--space-2xs)}.button-lab__preset-actions{justify-content:flex-end;align-items:center;gap:var(--space-xs);flex-wrap:wrap;flex:none;display:flex}.button-lab__save-status{color:var(--color-fg-subtle);font-size:var(--font-size-xs);line-height:var(--font-line-height-xs)}.button-lab__tactile-hero{gap:var(--space-xl);padding:var(--space-lg);border:var(--border-width-sm) solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-subtle);grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);margin-block-start:var(--space-xl);display:grid}.button-lab__hero-copy h3{color:var(--color-fg);font-family:var(--font-display);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);line-height:var(--font-line-height-lg);margin-block-start:var(--space-2xs)}.button-lab__hero-copy>p:last-of-type{color:var(--color-fg-muted);font-size:var(--font-size-sm);line-height:var(--font-line-height-sm);margin-block-start:var(--space-xs)}.button-lab__hero-copy dl{gap:var(--space-xs);grid-template-columns:repeat(3,minmax(0,1fr));margin-block-start:var(--space-md);display:grid}.button-lab__hero-copy dl>div{padding:var(--space-sm);border:var(--border-width-sm) solid var(--color-line-subtle);border-radius:var(--radius-md);background:var(--color-canvas)}.button-lab__hero-copy dt{color:var(--color-fg-subtle);font-size:var(--font-size-2xs);font-weight:var(--font-weight-semibold);line-height:var(--font-line-height-2xs);text-transform:uppercase}.button-lab__hero-copy dd{color:var(--color-brand);font-family:var(--font-mono);font-size:var(--font-size-xs);line-height:var(--font-line-height-xs);margin-block-start:var(--space-2xs)}.button-lab__control-panel{justify-content:center;gap:var(--space-md);min-width:0;padding:var(--space-xl);border:var(--border-width-sm) solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-sunken);box-shadow:var(--shadow-inset-bottom);flex-direction:column;display:flex}.button-lab__hero-states{justify-content:center;align-items:flex-end;gap:var(--space-lg);flex-wrap:wrap;display:flex}.button-lab__hero-state{align-items:center;gap:var(--space-sm);flex-direction:column;display:flex}.button-lab__hero-state>span,.button-lab__control-panel>p{color:var(--color-fg-subtle);font-size:var(--font-size-2xs);line-height:var(--font-line-height-2xs)}.button-lab__hero-state>span{font-weight:var(--font-weight-semibold);text-transform:uppercase}.button-lab__control-panel>p{text-align:center}.button-lab__foundation-group{border-block-start:var(--border-width-sm) solid var(--color-line-subtle);margin-block-start:var(--space-xl);padding-block-start:var(--space-lg)}.button-lab__group-heading{justify-content:space-between;align-items:baseline;gap:var(--space-md);margin-block-end:var(--space-md);display:flex}.button-lab__group-heading h3{color:var(--color-fg);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);line-height:var(--font-line-height-base)}.button-lab__group-heading span{color:var(--color-fg-subtle);font-size:var(--font-size-xs);line-height:var(--font-line-height-xs)}.button-lab__control-grid,.button-lab__override-grid{gap:var(--space-md);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));display:grid}.button-lab__token-control{min-width:0}.button-lab__token-control .ctrl__head{align-items:flex-start}.button-lab__token-control .ctrl__label{align-items:center;gap:var(--space-2xs);flex-wrap:wrap;min-width:0;display:flex}.button-lab__token-control .ctrl__value{text-align:end;text-overflow:ellipsis;white-space:nowrap;max-width:50%;overflow:hidden}.button-lab__token-detail{color:var(--color-fg-subtle);font-family:var(--font-mono);font-size:var(--font-size-2xs);line-height:var(--font-line-height-2xs);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.button-lab__control-help{color:var(--color-fg-muted);font-size:var(--font-size-xs);line-height:var(--font-line-height-xs)}.button-lab__inheritance-badge{min-height:var(--space-lg);border:var(--border-width-sm) solid var(--color-line);border-radius:var(--radius-full);color:var(--color-fg-subtle);font-size:var(--font-size-2xs);font-weight:var(--font-weight-semibold);line-height:var(--font-line-height-2xs);padding-inline:var(--space-sm);align-items:center;display:inline-flex}.button-lab__foundation-footer{border-block-start:var(--border-width-sm) solid var(--color-line-subtle);margin-block-start:var(--space-xl);padding-block-start:var(--space-lg)}.button-lab__callout{align-items:flex-start;gap:var(--space-sm);max-width:44rem;padding:var(--space-md);border:var(--border-width-sm) solid var(--color-line);border-radius:var(--radius-md);background:var(--color-subtle);color:var(--color-fg-muted);font-size:var(--font-size-sm);line-height:var(--font-line-height-sm);display:flex}.button-lab__callout [data-slot=icon]{color:var(--color-brand);flex:none}.button-lab__callout strong{color:var(--color-fg);font-weight:var(--font-weight-semibold)}.button-lab__size-axis{align-items:flex-end;gap:var(--space-sm);flex-direction:column;flex:none;display:flex}.button-lab__size-axis-label{color:var(--color-fg-subtle);font-size:var(--font-size-xs);line-height:var(--font-line-height-xs)}.button-lab__size-samples{align-items:center;gap:var(--space-sm);display:flex}.button-lab__target-card{background:var(--color-surface);align-items:center}.button-lab__target-copy{min-width:0}.button-lab__toolbar-preview{align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-lg);border:var(--border-width-sm) solid var(--color-line);border-radius:var(--radius-md);background:var(--color-canvas);box-shadow:var(--shadow-inset-bottom);flex-direction:column;flex:none;display:flex}.button-lab__toolbar-actions{align-items:flex-end;gap:var(--space-sm);display:flex}.button-lab__toolbar-state{align-items:center;gap:var(--space-2xs);flex-direction:column;display:flex}.button-lab__toolbar-state>span,.button-lab__toolbar-label{color:var(--color-fg-subtle);font-size:var(--font-size-2xs);line-height:var(--font-line-height-2xs)}.button-lab__toolbar-label{font-weight:var(--font-weight-semibold);text-transform:uppercase}.button-lab__recipe-list{gap:var(--space-lg);display:grid}.button-lab__recipe-header{padding:var(--space-lg);border-block-end:var(--border-width-sm) solid var(--color-line-subtle)}.button-lab__recipe-index{width:var(--space-2xl);height:var(--space-2xl);border:var(--border-width-sm) solid var(--color-line);border-radius:var(--radius-md);background:var(--color-canvas);color:var(--color-brand);font-family:var(--font-display);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);flex:none;place-items:center;display:grid}.button-lab__recipe-copy{flex:1;min-width:0}.button-lab__recipe-title-row{justify-content:space-between;align-items:center;gap:var(--space-sm);flex-wrap:wrap;display:flex}.button-lab__recipe-title-row h2{color:var(--color-fg);font-family:var(--font-display);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);line-height:var(--font-line-height-lg)}.button-lab__recipe-copy>p{max-width:52rem;color:var(--color-fg-muted);font-size:var(--font-size-sm);line-height:var(--font-line-height-sm);margin-block-start:var(--space-2xs)}.button-lab__state-grid{gap:var(--space-xs);padding:var(--space-lg);background:var(--color-subtle);grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));display:grid}.button-lab__state-cell{gap:var(--space-sm);min-width:0;padding:var(--space-md);border:var(--border-width-sm) solid var(--color-line-subtle);border-radius:var(--radius-md);background:var(--color-canvas);flex-direction:column;display:flex}.button-lab__state-label{color:var(--color-fg-subtle);font-family:var(--font-display);font-size:var(--font-size-2xs);font-weight:var(--font-weight-bold);letter-spacing:var(--font-letter-spacing-wider);line-height:var(--font-line-height-2xs);text-transform:uppercase}.button-lab__state-samples{align-items:center;gap:var(--space-xs);flex-wrap:wrap;min-width:0;display:flex}.button-lab .button-lab__sample{gap:var(--space-none);padding:var(--space-none);border-width:var(--border-width-none);border-radius:var(--lab-radius);background:var(--lab-recipe-base-bg);box-shadow:var(--lab-recipe-base-shadow);color:var(--lab-recipe-rest-fg);filter:none;font-family:var(--font-body);font-size:var(--lab-font-size);font-weight:var(--font-weight-medium);line-height:var(--lab-line-height);text-decoration:none;transition:none;position:relative;overflow:visible;transform:none}.button-lab .button-lab__sample[data-demo-static=true]{cursor:default}.button-lab .button-lab__front{box-sizing:border-box;justify-content:center;align-items:center;gap:var(--lab-gap);min-width:max-content;height:100%;padding-inline:var(--lab-padding-inline);border-color:var(--lab-recipe-rest-border);border-style:solid;border-width:var(--lab-border-width);border-radius:inherit;background:var(--lab-recipe-rest-bg);box-shadow:var(--lab-recipe-rest-shadow);color:var(--lab-recipe-rest-fg);transform:translateY(calc(-1 * var(--lab-recipe-face-lift-rest)));transition-duration:calc(var(--lab-release-duration) * var(--lab-time-scale,1));transition-property:background,border-color,box-shadow,color,transform;transition-timing-function:var(--lab-release-easing);will-change:transform;display:inline-flex;position:relative}.button-lab .button-lab__sample[data-button-content=icon]>.button-lab__front{width:100%;min-width:var(--space-none);padding-inline:var(--space-none)}.button-lab .button-lab__sample:after{content:none}.button-lab .button-lab__front [data-slot=icon]{width:var(--lab-icon-size);height:var(--lab-icon-size)}.button-lab .button-lab__sample:not(:disabled):is(:not([data-demo-static=true]):hover,[data-demo-state=hover])>.button-lab__front{border-color:var(--lab-recipe-interaction-border);background:var(--lab-recipe-hover-bg);box-shadow:var(--lab-recipe-hover-shadow);color:var(--lab-recipe-interaction-fg);transform:translateY(calc(-1 * var(--lab-recipe-face-lift-hover)))}.button-lab .button-lab__sample:not([data-demo-static=true]):focus-visible{box-shadow:var(--lab-recipe-base-shadow);outline:none}.button-lab .button-lab__sample[data-demo-state=focus]>.button-lab__front,.button-lab .button-lab__sample:not([data-demo-static=true]):focus-visible>.button-lab__front{outline-color:var(--color-brand);outline-offset:var(--border-width-md);outline-style:solid;outline-width:var(--border-width-focus)}.button-lab .button-lab__sample:not(:disabled):is(:not([data-demo-static=true]):active,[data-demo-state=pressed])>.button-lab__front{border-color:var(--lab-recipe-interaction-border);background:var(--lab-recipe-press-bg);box-shadow:var(--lab-recipe-pressed-shadow);color:var(--lab-recipe-interaction-fg);filter:none;transform:translateY(calc(-1 * var(--lab-recipe-face-lift-pressed)));transition-duration:calc(var(--lab-press-duration) * var(--lab-time-scale,1));transition-timing-function:var(--lab-press-easing)}.button-lab .button-lab__sample[aria-pressed=true]:not(:disabled):not([data-demo-static=true])>.button-lab__front{border-color:var(--lab-recipe-interaction-border);background:var(--lab-recipe-press-bg);box-shadow:var(--lab-recipe-pressed-shadow);color:var(--lab-recipe-interaction-fg);transform:translateY(calc(-1 * var(--lab-recipe-face-lift-pressed)));transition-duration:calc(var(--lab-press-duration) * var(--lab-time-scale,1));transition-timing-function:var(--lab-press-easing)}.button-lab .button-lab__sample:disabled,.button-lab .button-lab__sample[data-demo-state=disabled]{opacity:var(--opacity-disabled)}.button-lab [data-button-recipe=link] .button-lab__sample:not(:disabled):is(:not([data-demo-static=true]):hover,[data-demo-state=hover],[data-demo-state=pressed])>.button-lab__front{text-underline-offset:var(--space-2xs);text-decoration:underline}.button-lab__overrides{border-block-start:var(--border-width-sm) solid var(--color-line-subtle)}.button-lab__alias-note{align-items:flex-start;gap:var(--space-xs);padding:var(--space-md) var(--space-lg);border-block-start:var(--border-width-sm) solid var(--color-line-subtle);background:var(--color-subtle);color:var(--color-fg-subtle);font-size:var(--font-size-xs);line-height:var(--font-line-height-xs);display:flex}.button-lab__alias-note [data-slot=icon]{color:var(--color-brand);flex:none}.button-lab__overrides summary{cursor:pointer;justify-content:space-between;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);color:var(--color-fg);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);line-height:var(--font-line-height-sm);list-style:none;display:flex}.button-lab__overrides summary::-webkit-details-marker{display:none}.button-lab__overrides summary:after{content:"+";color:var(--color-brand);font-family:var(--font-display);font-size:var(--font-size-lg)}.button-lab__overrides[open] summary:after{content:"−"}.button-lab__overrides summary>span:last-child{color:var(--color-fg-subtle);font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);margin-inline-start:auto}.button-lab__override-grid{padding:0 var(--space-lg) var(--space-lg)}.button-lab__override-control{gap:var(--space-2xs);min-width:0;color:var(--color-fg-muted);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);flex-direction:column;display:flex}.button-lab__select{cursor:pointer;min-width:0}.button-lab__override-footer{padding:var(--space-md) var(--space-lg);border-block-start:var(--border-width-sm) solid var(--color-line-subtle);background:var(--color-subtle);align-items:center}.button-lab__override-footer p{max-width:48rem;color:var(--color-fg-subtle);font-size:var(--font-size-xs);line-height:var(--font-line-height-xs)}.button-lab__theater{gap:var(--space-xl);grid-template-columns:minmax(16rem,.9fr) minmax(0,1.4fr);align-items:center;display:grid}.button-lab__theater-readout{color:var(--color-brand);font-family:var(--font-mono);font-size:var(--font-size-xs);line-height:var(--font-line-height-xs);margin-block-start:var(--space-md)}.button-lab__theater-stage{gap:var(--space-lg);min-width:0;padding:var(--space-xl);border:var(--border-width-sm) solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-sunken);box-shadow:var(--shadow-inset-bottom);flex-direction:column;display:flex}.button-lab__theater-specimens{justify-content:center;align-items:flex-end;gap:var(--space-xl);flex-wrap:wrap;display:flex}.button-lab__theater-controls{justify-content:center;align-items:center;gap:var(--space-xs);flex-wrap:wrap;display:flex}.button-lab__theater-divider{width:var(--border-width-sm);background:var(--color-line);align-self:stretch}.button-lab__bench-row{gap:var(--space-lg);grid-template-columns:repeat(auto-fit,minmax(24rem,1fr));display:grid}.button-lab__bench-wrap{min-width:0;display:grid}.button-lab__bench-card{height:100%}.button-lab__tooltip-bench,.button-lab__latch-benches{gap:var(--space-lg);flex-direction:column;margin-block-start:var(--space-lg);display:flex}.button-lab__latch-group{gap:var(--space-sm);flex-direction:column;display:flex}.button-lab__latch-label{color:var(--color-fg-subtle);font-size:var(--font-size-xs);line-height:var(--font-line-height-xs)}.button-lab__latch-row{align-items:center;gap:var(--space-sm);flex-wrap:wrap;display:flex}.button-lab__bench-controls{gap:var(--space-sm);flex-direction:column;display:flex}.button-lab__bench-choice-row{align-items:center;gap:var(--space-2xs);flex-wrap:wrap;display:flex}.button-lab__bench-choice-row>.button-lab__latch-label{margin-inline-end:var(--space-2xs)}.button-lab__bench-note{max-width:36rem;color:var(--color-fg-subtle);font-size:var(--font-size-xs);line-height:var(--font-line-height-xs)}.button-lab__stack-note{gap:var(--space-xl);background:var(--color-subtle);grid-template-columns:minmax(14rem,.75fr) minmax(0,2fr);display:grid}.button-lab__stack-note dl{gap:var(--space-md);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.button-lab__stack-note dl>div{border-inline-start:var(--border-width-md) solid var(--color-line);padding-inline-start:var(--space-md)}.button-lab__stack-note dt{color:var(--color-fg);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);line-height:var(--font-line-height-sm)}.button-lab__stack-note dd{color:var(--color-fg-muted);font-size:var(--font-size-xs);line-height:var(--font-line-height-xs);margin-block-start:var(--space-2xs)}@media (width<=64rem){.button-lab__tactile-hero,.button-lab__theater{grid-template-columns:1fr}.button-lab__foundation-header,.button-lab__foundation-footer,.button-lab__target-card{flex-direction:column}.button-lab__preset-actions,.button-lab__size-axis{justify-content:flex-start;align-items:flex-start}.button-lab__target-card{align-items:stretch}.button-lab__toolbar-preview{align-self:flex-start}}@media (width<=44rem){.button-lab__group-heading,.button-lab__overrides summary,.button-lab__override-footer{flex-direction:column;align-items:flex-start}.button-lab__overrides summary>span:last-child{margin-inline-start:0}.button-lab__stack-note,.button-lab__stack-note dl{grid-template-columns:1fr}.button-lab__control-panel{padding-inline:var(--space-md)}.button-lab__bench-row{grid-template-columns:1fr}.button-lab__theater-stage{padding:var(--space-md)}}