@layer utilities{.button-base{--button-color:var(--tint);--button-background:oklch(from var(--button-color) var(--lightness-100) var(--chroma-100) h);--button-gradient:oklch(from var(--button-color) var(--lightness-200) var(--chroma-200) h);--button-border:oklch(from var(--button-color) var(--lightness-300) var(--chroma-300) h);--button-highlight:#fffc;--button-shadow:oklch(from var(--button-color) var(--lightness-400) var(--chroma-400) h);--button-border-size:1px;--button-text:oklch(from var(--button-color) var(--lightness-1400) var(--chroma-1400) h);--button-gradient-size:8px;background:var(--button-background);color:var(--button-text);box-shadow:inset 0 -1px 0 var(--button-shadow),  inset 0 0 0 var(--button-border-size) var(--button-border),  inset 0px calc(var(--button-border-size) + 1px) 0px var(--button-highlight),  inset 0px calc(-1 * var(--button-gradient-size)) var(--button-gradient-size) -2px var(--button-gradient);will-change:scale;forced-color-adjust:none;-webkit-tap-highlight-color:transparent;outline:none;transition-property:background,color,scale,box-shadow;transition-duration:.2s}@media (prefers-color-scheme:dark){.button-base{--button-shadow:oklch(from var(--button-color) var(--lightness-200) var(--chroma-200) h);--button-highlight:#ffffff26;box-shadow:inset 0 var(--button-border-size) 0 var(--button-highlight),  inset 0 calc(-1 * var(--button-border-size)) 0 var(--button-shadow),  inset 0 0 0 var(--button-border-size) var(--button-border),  inset 0 var(--button-gradient-size) var(--button-gradient-size) -2px var(--button-gradient)}}.button-base:where([data-pressed]){--button-background:oklch(from var(--button-color) var(--lightness-200) var(--chroma-200) h)}.button-base:where([data-focus-visible]){outline:2px solid var(--focus-ring-color);outline-offset:2px}.button-base:where([data-variant=secondary]){--button-color:var(--gray)}.button-base:where([data-variant=quiet]){--button-background:none;--button-text:var(--text-color);box-shadow:0 0 0 1px #0000}.button-base:where([data-variant=quiet]):where([data-hovered],[data-pressed]){--button-background:var(--tint-200);--button-text:var(--tint-1400);box-shadow:0 0 0 1px var(--tint-200)}.button-base:where([data-selected]){--button-background:oklch(from var(--button-color) 55% c h);--button-border:oklch(from var(--button-color) 50% c h);--button-gradient:var(--button-border);--button-highlight:#fff3;--button-shadow:oklch(from var(--button-color) 30% c h);--button-text:var(--highlight-foreground);box-shadow:inset 0 -1px 0 var(--button-shadow),  inset 0 0 0 1px var(--button-border),  inset 0 2px 0 var(--button-highlight),  inset 0 calc(-1 * var(--button-gradient-size)) var(--button-gradient-size) var(--button-gradient)}@media (prefers-color-scheme:dark){.button-base:where([data-selected]){--button-highlight:#fff6;--button-gradient:#fff3;--button-shadow:var(--button-border);box-shadow:inset 0 1px 0 var(--button-highlight),  inset 0 var(--button-gradient-size) var(--button-gradient-size) var(--button-gradient),  inset 0 0 0 1px var(--button-border)}}.button-base:where([data-selected]):where([data-pressed]){--button-background:oklch(from var(--button-color) 50% c h)}.button-base:where([data-disabled]){box-shadow:none;--button-background:var(--border-color-disabled);--button-text:var(--text-color-disabled)}.button-base:where([data-disabled]):where([data-variant=quiet]){--button-background:none}@media (forced-colors:active){.button-base{--button-background:ButtonFace;--button-text:ButtonText;--button-border:ButtonBorder;box-shadow:inset 0 0 0 var(--button-border-size) var(--button-border)}.button-base:where([data-variant=quiet]){--button-border:transparent}.button-base:where([data-variant=quiet]):where([data-hovered],[data-pressed]){--button-border:ButtonBorder}.button-base:where([data-selected]){--button-background:Highlight;--button-text:HighlightText;--button-border:Highlight}.button-base:where([data-disabled]){--button-background:ButtonFace;--button-text:GrayText;--button-border:GrayText}.button-base:where([data-disabled]):where([data-variant=quiet]){--button-border:transparent}}.indicator{--indicator-color:var(--gray);--indicator-background:oklch(from var(--indicator-color) var(--lightness-100) var(--chroma-100) h);--indicator-border:oklch(from var(--indicator-color) var(--lightness-800) var(--chroma-800) h);--indicator-drop-shadow:0 0;background:var(--indicator-background);box-shadow:inset 0 0 0 1px var(--indicator-border),  inset 0 2px 0 white,  inset 0 -4px 2px oklch(from var(--indicator-color) 30% c h / .08),  var(--indicator-drop-shadow);will-change:scale}@media (prefers-color-scheme:dark){.indicator{box-shadow:inset 0 1px 0 #fff6,  inset 0 4px 2px #ffffff1a,  inset 0 0 0 1px var(--indicator-border),  var(--indicator-drop-shadow)}}@media (forced-colors:active){.indicator{--indicator-background:ButtonFace;--indicator-border:ButtonBorder;box-shadow:inset 0 0 0 1px var(--indicator-border)}}.indicator[data-pressed],[data-pressed] .indicator{scale:.9}[data-selected]>.indicator,[data-indeterminate]>.indicator{--indicator-color:var(--highlight-background);--indicator-background:var(--indicator-color);--indicator-highlight:#ffffff4d;--indicator-shadow:oklch(from var(--indicator-color) 45% c h);--indicator-border:var(--indicator-background);box-shadow:inset 0 -1px 0 var(--indicator-shadow),  inset 0 0 0 1px var(--indicator-border),  inset 0 2px 0 var(--indicator-highlight),  var(--indicator-drop-shadow)}@media (prefers-color-scheme:dark){[data-selected]>.indicator,[data-indeterminate]>.indicator{--indicator-highlight:#ffffff80;--indicator-gradient:#ffffff1f;box-shadow:inset 0 1px 0 var(--indicator-highlight),  inset 0 4px 2px var(--indicator-gradient),  inset 0 0 0 1px var(--indicator-border),  var(--indicator-drop-shadow)}}@media (forced-colors:active){[data-selected]>.indicator,[data-indeterminate]>.indicator{box-shadow:none}}.indicator[data-invalid],[data-invalid]>.indicator{--indicator-color:var(--invalid-color)}@media (forced-colors:active){.indicator[data-invalid],[data-invalid]>.indicator{--indicator-border:var(--invalid-color)}}.indicator[data-focus-visible],[data-focus-visible]>.indicator{outline:2px solid var(--focus-ring-color);outline-offset:2px}.indicator[data-disabled],[data-disabled]>.indicator{background:var(--field-background);box-shadow:inset 0 0 0 1px var(--border-color-disabled)}.inset{--inset-background:var(--field-background);--inset-border:var(--border-color);--inset-border-size:1px;--inset-shadow-offset:2px;--inset-shadow-size:4px;background:var(--inset-background);box-shadow:inset 0 0 0 var(--inset-border-size) var(--inset-border),  inset 0 var(--inset-shadow-offset) var(--inset-shadow-size) #00000026,  0 1px 0 var(--gray-50);forced-color-adjust:none;transition:box-shadow .2s}@media (prefers-color-scheme:dark){.inset{--inset-border:var(--gray-200);--border-color-hover:var(--gray-300);--inset-highlight:var(--gray-400);--inset-shadow-size:6px;box-shadow:inset 0 calc(-1 * var(--inset-border-size)) 0 var(--inset-highlight),  inset 0 0 0 var(--inset-border-size) var(--inset-border),  inset 0 1px var(--inset-shadow-size) #000}}.inset:where([data-hovered],[data-pressed]){--inset-border:var(--border-color-hover)}@media (forced-colors:active){.inset{--inset-border:ButtonBorder;box-shadow:inset 0 0 0 var(--inset-border-size) var(--inset-border)}}.inset:where([data-invalid]){--inset-border:var(--invalid-color);--inset-highlight:var(--inset-border)}.inset:where([data-disabled]){box-shadow:inset 0 0 0 1px var(--border-color-disabled)}.inset.track{--inset-shadow-offset:1px;--inset-shadow-size:3px}@media (prefers-color-scheme:light){.inset.track{--inset-background:var(--gray-300);--inset-border:var(--gray-500);--inset-border-size:.5px}}@media (forced-colors:active){.inset.track{--inset-background:Field;--inset-border:ButtonBorder;--inset-border-size:1px}}}