@layer components{.spinner{animation:motion-spin calc(var(--transition-fast,0s) * 5) linear infinite;border:.14em solid color-mix(in oklab, var(--on-control,currentColor) 30%, transparent);border-radius:var(--radius-full);border-top-color:var(--on-control,currentColor);height:.8em;flex:none;width:.8em;margin-inline-start:var(--space-2xs)}.button{font-family:var(--font-display);font-size:clamp(1.25rem, var(--stage-unit) * 3, 1.75rem);letter-spacing:-.005em;align-items:center;gap:var(--space-xs);transition:background-color var(--transition-fast,0s) var(--ease-out), color var(--transition-fast,0s) var(--ease-out), transform var(--transition-fast,0s) var(--ease-out), box-shadow var(--transition-fast,0s) var(--ease-out);white-space:nowrap;justify-content:center;font-weight:700;font-stretch:90%;line-height:1.05;text-decoration:none;display:inline-flex;position:relative}.button.small{font-size:var(--text-s);gap:var(--space-2xs)}.button.large{font-size:clamp(1.375rem, var(--stage-unit) * 3.3, 2.25rem)}.button.filled .control-label{text-box:trim-both cap alphabetic}.button.filled.small{border-radius:var(--radius-s);min-height:2.5rem;padding:0 var(--space-s)}.button.filled.medium{border-radius:var(--radius-m);min-height:var(--control-height);padding:0 var(--space-m)}.button.filled.large{border-radius:var(--radius-m);min-height:4.5rem;padding:0 var(--space-l)}.button.filled{--edge:.1875rem;border-radius:var(--radius-m);box-shadow:0 var(--edge) 0 0 var(--chipboard), var(--shadow-piece);transition:transform var(--transition-fast,0s) var(--ease-out), box-shadow var(--transition-fast,0s) var(--ease-out);border:0;position:relative}.button.filled:not([data-disabled])[data-pressed]{box-shadow:0 calc(var(--edge) * .25) 0 0 var(--chipboard), var(--shadow-pressed);transform:translateY(calc(var(--edge) * .75))}@media (hover:hover) and (pointer:fine){.button.filled:not([data-disabled])[data-hovered]:not([data-pressed]){box-shadow:0 calc(var(--edge) * 1.75) 0 0 var(--chipboard), var(--shadow-lifted);transform:translateY(calc(var(--edge) * -.75))}}.button.filled{--edge:.25rem;--on-control:var(--on-primary);background:var(--primary);box-shadow:0 var(--edge) 0 var(--primary-edge), var(--shadow-raised);color:var(--on-control)}.button.filled:not([data-disabled])[data-pressed]{box-shadow:0 calc(var(--edge) * .25) 0 var(--primary-edge), var(--shadow-pressed)}@media (hover:hover) and (pointer:fine){.button.filled:not([data-disabled])[data-hovered]:not([data-pressed]){box-shadow:0 calc(var(--edge) * 1.75) 0 var(--primary-edge), var(--shadow-raised)}}.button.outlined .control-label{text-box:trim-both cap alphabetic}.button.outlined.small{border-radius:var(--radius-s);min-height:2.5rem;padding:0 var(--space-s)}.button.outlined.medium{border-radius:var(--radius-m);min-height:var(--control-height);padding:0 var(--space-m)}.button.outlined.large{border-radius:var(--radius-m);min-height:4.5rem;padding:0 var(--space-l)}.button.outlined{--edge:.1875rem;border-radius:var(--radius-m);box-shadow:0 var(--edge) 0 0 var(--chipboard), var(--shadow-piece);transition:transform var(--transition-fast,0s) var(--ease-out), box-shadow var(--transition-fast,0s) var(--ease-out);border:0;position:relative}.button.outlined:not([data-disabled])[data-pressed]{box-shadow:0 calc(var(--edge) * .25) 0 0 var(--chipboard), var(--shadow-pressed);transform:translateY(calc(var(--edge) * .75))}@media (hover:hover) and (pointer:fine){.button.outlined:not([data-disabled])[data-hovered]:not([data-pressed]){box-shadow:0 calc(var(--edge) * 1.75) 0 0 var(--chipboard), var(--shadow-lifted);transform:translateY(calc(var(--edge) * -.75))}}.button.outlined{--on-control:var(--board-ink);background:var(--track-a);color:var(--on-control)}.button.underlined{--on-control:var(--ink-muted);color:var(--on-control);padding-block:var(--space-2xs);text-decoration:underline;text-decoration-thickness:var(--stroke-thin);text-underline-offset:5px}.button.underlined:not([data-disabled])[data-pressed]{--on-control:var(--ink)}@media (hover:hover) and (pointer:fine){.button.underlined:not([data-disabled])[data-hovered]{--on-control:var(--ink)}}.button.underlined[data-pressed]{transform:translateY(.0625rem)}.button[data-disabled]{--on-control:var(--ink-muted);color:var(--on-control);cursor:not-allowed}.button.filled[data-disabled],.button.outlined[data-disabled]{box-shadow:var(--shadow-recess-shallow);outline:var(--stroke-thin) dashed var(--socket-line);outline-offset:-2px;background:0 0;transform:none}.button[data-pending]{color:#0000;cursor:progress}.button .spinner{margin:auto;position:absolute;inset:0}}@keyframes motion-spin{to{rotate:360deg}}