@layer components{.spinner{border:.14em solid color-mix(in srgb, var(--control-ink,currentColor) 30%, transparent);border-radius:var(--radius-full);border-top-color:var(--control-ink,currentColor);height:.8em;flex:none;width:.8em;margin-inline-start:var(--space-2xs);animation:.7s linear infinite spinner-turn}@media (prefers-reduced-motion:reduce){.spinner{animation:none}}.button[data-focus-visible],.button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.button{font-family:var(--font-display);letter-spacing:-.005em;align-items:center;gap:var(--space-xs);transition:background-color var(--transition-fast,0) var(--timing,ease), color var(--transition-fast,0) var(--timing,ease), transform var(--transition-fast,0) var(--timing,ease), box-shadow var(--transition-fast,0) var(--timing,ease);white-space:nowrap;justify-content:center;font-size:clamp(1.25rem,3vmin,1.75rem);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,3.3vmin,2.25rem)}.button.filled .control-label{text-box:trim-both cap alphabetic}.button.filled.small{border-radius:var(--radius-s);min-height:40px;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:72px;padding:0 var(--space-l)}.button.filled{border-radius:var(--radius-m);box-shadow:0 3px 0 0 var(--chipboard), 0 8px 14px -6px var(--shadow);transition:transform var(--transition-fast,0) var(--timing,ease), box-shadow var(--transition-fast,0) var(--timing,ease);border:0;position:relative}.button.filled:not([data-disabled])[data-pressed]{box-shadow:0 1px 0 0 var(--chipboard), 0 4px 8px -6px var(--shadow);transform:translateY(2px)}@media (hover:hover) and (pointer:fine){.button.filled:not([data-disabled])[data-hovered]:not([data-pressed]){box-shadow:0 5px 0 0 var(--chipboard), 0 12px 18px -8px var(--shadow);transform:translateY(-2px)}}.button.filled{--control-ink:var(--on-primary);background:var(--primary);box-shadow:0 4px 0 var(--primary-edge), 0 12px 18px -10px var(--shadow);color:var(--control-ink)}.button.filled:not([data-disabled])[data-pressed]{box-shadow:0 1px 0 var(--primary-edge), 0 4px 8px -6px var(--shadow)}@media (hover:hover) and (pointer:fine){.button.filled:not([data-disabled])[data-hovered]:not([data-pressed]){box-shadow:0 6px 0 var(--primary-edge), 0 14px 20px -10px var(--shadow)}}.button.outlined .control-label{text-box:trim-both cap alphabetic}.button.outlined.small{border-radius:var(--radius-s);min-height:40px;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:72px;padding:0 var(--space-l)}.button.outlined{border-radius:var(--radius-m);box-shadow:0 3px 0 0 var(--chipboard), 0 8px 14px -6px var(--shadow);transition:transform var(--transition-fast,0) var(--timing,ease), box-shadow var(--transition-fast,0) var(--timing,ease);border:0;position:relative}.button.outlined:not([data-disabled])[data-pressed]{box-shadow:0 1px 0 0 var(--chipboard), 0 4px 8px -6px var(--shadow);transform:translateY(2px)}@media (hover:hover) and (pointer:fine){.button.outlined:not([data-disabled])[data-hovered]:not([data-pressed]){box-shadow:0 5px 0 0 var(--chipboard), 0 12px 18px -8px var(--shadow);transform:translateY(-2px)}}.button.outlined{--control-ink:var(--board-ink);background:var(--track-a);color:var(--control-ink)}.button.underlined{--control-ink:var(--ink-muted);color:var(--control-ink);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]{--control-ink:var(--ink)}@media (hover:hover) and (pointer:fine){.button.underlined:not([data-disabled])[data-hovered]{--control-ink:var(--ink)}}.button.underlined[data-pressed]{transform:translateY(1px)}.button[data-disabled]{--control-ink:var(--ink-muted);color:var(--control-ink);cursor:not-allowed}.button.filled[data-disabled],.button.outlined[data-disabled]{box-shadow:inset 0 3px 6px -4px var(--shadow);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 spinner-turn{to{transform:rotate(1turn)}}