.swatch{gap:var(--troupe-space-stack-xs);flex-direction:column;display:flex}.swatch-chip{padding:var(--troupe-space-inset-lg);border:solid var(--troupe-color-border-subtle);border-width:var(--troupe-border-width-default);border-radius:var(--troupe-radius-indicator)}.type-row{gap:var(--troupe-space-stack-xs);flex-direction:column;display:flex}.type-sample{overflow-wrap:anywhere}.t-display,.t-headline,.t-title{font-family:var(--troupe-font-family-heading);font-weight:var(--troupe-font-weight-heading);line-height:var(--troupe-font-line-height-heading)}.t-display{font-size:var(--troupe-font-size-display)}.t-headline{font-size:var(--troupe-font-size-headline)}.t-title{font-size:var(--troupe-font-size-title)}.t-lead{font-size:var(--troupe-font-size-lead)}.t-body{font-size:var(--troupe-font-size-body)}.t-caption{font-size:var(--troupe-font-size-caption)}.t-strong{font-weight:var(--troupe-font-weight-strong)}.t-code{font-family:var(--troupe-font-family-code)}.space-row{gap:var(--troupe-space-stack-xs);flex-direction:column;display:flex}.space-demo{align-items:center;gap:var(--troupe-space-inline-md);display:flex}.space-demo code{flex:none}.space-bar{background:var(--troupe-color-action-primary-default);border-radius:var(--troupe-radius-indicator);display:block}.inset-box{background:var(--troupe-color-surface-subtle);border:var(--troupe-border-width-default) dashed var(--troupe-color-border-strong);border-radius:var(--troupe-radius-indicator);display:inline-block}.inset-box>span{background:var(--troupe-color-surface-raised);border:var(--troupe-border-width-default) solid var(--troupe-color-border-default);display:block}.stack-demo,.inline-demo{display:flex}.stack-demo{flex-direction:column}.inline-demo{flex-direction:row}.block{padding:var(--troupe-space-inset-sm);background:var(--troupe-color-surface-subtle);border:var(--troupe-border-width-default) solid var(--troupe-color-border-default);border-radius:var(--troupe-radius-indicator);display:block}.shape{padding:var(--troupe-space-inset-lg);background:var(--troupe-color-surface-raised);border:var(--troupe-border-width-default) solid var(--troupe-color-border-default)}.line{border:solid var(--troupe-color-border-strong);border-width:0}.motion-stage{gap:var(--troupe-space-stack-md);flex-direction:column;display:flex}.motion-controls{gap:var(--troupe-space-inline-sm);flex-wrap:wrap;display:flex}.motion-controls button{font:inherit;font-weight:var(--troupe-font-weight-strong);cursor:pointer;padding:var(--troupe-space-inset-sm) var(--troupe-space-inset-md);border:var(--troupe-border-width-default) solid var(--troupe-color-border-default);border-radius:var(--troupe-radius-control);background:var(--troupe-color-action-secondary-default);color:var(--troupe-color-text-default);transition:background-color var(--troupe-motion-duration-state-change) var(--troupe-motion-easing-state-change)}.motion-controls button:hover{background:var(--troupe-color-action-secondary-hover)}.motion-controls button:active{background:var(--troupe-color-action-secondary-active)}.motion-controls button:focus-visible{outline:var(--troupe-border-width-focus-visible) solid var(--troupe-color-border-focus-visible);outline-offset:var(--troupe-border-offset-focus-visible)}.motion-target{padding:var(--troupe-space-inset-lg);background:var(--troupe-color-surface-inverse);color:var(--troupe-color-text-inverse);border-radius:var(--troupe-radius-container);box-shadow:var(--troupe-shadow-overlay);opacity:1;transition:opacity var(--troupe-motion-duration-enter) var(--troupe-motion-easing-enter), translate var(--troupe-motion-duration-enter) var(--troupe-motion-easing-enter), background-color var(--troupe-motion-duration-state-change) var(--troupe-motion-easing-state-change);translate:0}.motion-target[data-state=hidden]{opacity:0;translate:0 var(--troupe-space-stack-lg);transition:opacity var(--troupe-motion-duration-exit) var(--troupe-motion-easing-exit), translate var(--troupe-motion-duration-exit) var(--troupe-motion-easing-exit)}.motion-target[data-state=emphasis]{animation:emphasis var(--troupe-motion-duration-emphasis) var(--troupe-motion-easing-emphasis)}.motion-target[data-state=toggled]{background:var(--troupe-color-action-primary-hover);color:var(--troupe-color-text-on-action)}@keyframes emphasis{0%,to{translate:0}50%{translate:0 calc(var(--troupe-space-stack-sm) * -1)}}@keyframes emphasis-still{0%,50%{outline-color:var(--troupe-color-border-focus-visible)}to{outline-color:#0000}}@media (prefers-reduced-motion:reduce){.motion-target,.motion-target[data-state=hidden]{transition-property:opacity,background-color;translate:none}.motion-target{outline:var(--troupe-border-width-focus-visible) solid transparent}.motion-target[data-state=emphasis]{animation-name:emphasis-still}}.motion-note{font-size:var(--troupe-font-size-caption);color:var(--troupe-color-text-subtle)}.token-table{gap:var(--troupe-space-stack-xs);flex-direction:column;display:flex}