:global .enact-body-fit {
  margin: 0;
  height: 100%;
  overflow: auto;
  position: relative;
}
:global .enact-fit {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
:global .enact-clip {
  overflow: hidden;
}
:global .enact-no-touch-action {
  touch-action: none;
}
:global .enact-untouchable {
  pointer-events: none;
}
:global .enact-untouchable > * {
  pointer-events: auto;
}
:global .enact-unselectable {
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}
:global .enact-selectable {
  cursor: auto;
  -webkit-user-select: text;
  user-select: text;
}
:global .debug.aria [aria-label]::after,
:global .debug.aria [aria-valuetext]::after {
  position: absolute;
  font-size: small;
  font-weight: 100;
  background-color: #ffaa0099;
  color: white;
  border: 1px solid #ffaa00;
  border-radius: 0.5em;
  border-top-left-radius: 0;
  bottom: 0;
  padding: 0 1ex;
  transform: translateY(100%);
  line-height: 1.3em;
  z-index: 2;
  pointer-events: none;
}
:global .debug.aria [aria-label]::after {
  content: "Aria Label:\0020" attr(aria-label);
}
:global .debug.aria [aria-valuetext]::after {
  content: "Aria Value:\0020" attr(aria-valuetext);
}
:global .debug.aria [aria-label][aria-valuetext]::after {
  content: "Aria Label:\0020'" attr(aria-label) "'; Aria Value:\0020'" attr(aria-valuetext) "';";
}
@font-face {
  font-family: "Agate Icons";
  src: local("Agate-icons"), url(../fonts/Agate-icons.ttf) format("truetype");
  font-weight: normal;
}
@font-face {
  font-family: "Silicon Icons";
  src: local("Agate-icons"), url(../fonts/Agate-icons.ttf) format("truetype");
  font-weight: normal;
}
@font-face {
  font-family: "Silicon Icons";
  src: local("Silicon-Icons"), url(../fonts/Silicon-Icons.ttf) format("truetype");
  font-weight: normal;
}
/* ----- Generated Agate Locale Fonts (Stacking onto "Agate") ------ */
@font-face {
  font-family: "Agate am";
  src: local("Noto Sans Ethiopic Regular");
  font-weight: normal;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Ethiopic Regular");
  font-weight: normal;
}
@font-face {
  font-family: "Agate am";
  src: local("Noto Sans Ethiopic Regular");
  font-weight: 300;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Ethiopic Regular");
  font-weight: 300;
}
@font-face {
  font-family: "Agate am";
  src: local("Noto Sans Ethiopic Bold");
  font-weight: 600;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Ethiopic Bold");
  font-weight: 600;
}
@font-face {
  font-family: "Agate am";
  src: local("Noto Sans Ethiopic Bold");
  font-weight: 700;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Ethiopic Bold");
  font-weight: 700;
}
@font-face {
  font-family: "Agate ar";
  src: local("Noto Sans Arabic Regular");
  font-weight: normal;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Arabic Regular");
  font-weight: normal;
}
@font-face {
  font-family: "Agate ar";
  src: local("Noto Sans Arabic Regular");
  font-weight: 300;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Arabic Regular");
  font-weight: 300;
}
@font-face {
  font-family: "Agate ar";
  src: local("Noto Sans Arabic Bold");
  font-weight: 600;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Arabic Bold");
  font-weight: 600;
}
@font-face {
  font-family: "Agate ar";
  src: local("Noto Sans Arabic Bold");
  font-weight: 700;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Arabic Bold");
  font-weight: 700;
}
@font-face {
  font-family: "Agate ur";
  src: local("Noto Sans Arabic Regular");
  font-weight: normal;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Arabic Regular");
  font-weight: normal;
}
@font-face {
  font-family: "Agate ur";
  src: local("Noto Sans Arabic Regular");
  font-weight: 300;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Arabic Regular");
  font-weight: 300;
}
@font-face {
  font-family: "Agate ur";
  src: local("Noto Sans Arabic Bold");
  font-weight: 600;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Arabic Bold");
  font-weight: 600;
}
@font-face {
  font-family: "Agate ur";
  src: local("Noto Sans Arabic Bold");
  font-weight: 700;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Arabic Bold");
  font-weight: 700;
}
@font-face {
  font-family: "Agate ja";
  src: local("Noto Sans CJK KR Regular");
  font-weight: normal;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans CJK KR Regular");
  font-weight: normal;
}
@font-face {
  font-family: "Agate ja";
  src: local("Noto Sans CJK KR Regular");
  font-weight: 300;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans CJK KR Regular");
  font-weight: 300;
}
@font-face {
  font-family: "Agate ja";
  src: local("Noto Sans CJK KR Bold");
  font-weight: 600;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans CJK KR Bold");
  font-weight: 600;
}
@font-face {
  font-family: "Agate ja";
  src: local("Noto Sans CJK KR Bold");
  font-weight: 700;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans CJK KR Bold");
  font-weight: 700;
}
@font-face {
  font-family: "Agate ko";
  src: local("Noto Sans CJK KR Regular");
  font-weight: normal;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans CJK KR Regular");
  font-weight: normal;
}
@font-face {
  font-family: "Agate ko";
  src: local("Noto Sans CJK KR Regular");
  font-weight: 300;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans CJK KR Regular");
  font-weight: 300;
}
@font-face {
  font-family: "Agate ko";
  src: local("Noto Sans CJK KR Bold");
  font-weight: 600;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans CJK KR Bold");
  font-weight: 600;
}
@font-face {
  font-family: "Agate ko";
  src: local("Noto Sans CJK KR Bold");
  font-weight: 700;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans CJK KR Bold");
  font-weight: 700;
}
@font-face {
  font-family: "Agate ta";
  src: local("Noto Sans Tamil Regular");
  font-weight: normal;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Tamil Regular");
  font-weight: normal;
}
@font-face {
  font-family: "Agate ta";
  src: local("Noto Sans Tamil Regular");
  font-weight: 300;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Tamil Regular");
  font-weight: 300;
}
@font-face {
  font-family: "Agate ta";
  src: local("Noto Sans Tamil Bold");
  font-weight: 600;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Tamil Bold");
  font-weight: 600;
}
@font-face {
  font-family: "Agate ta";
  src: local("Noto Sans Tamil Bold");
  font-weight: 700;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Tamil Bold");
  font-weight: 700;
}
@font-face {
  font-family: "Agate th";
  src: local("Noto Sans Thai Regular");
  font-weight: normal;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Thai Regular");
  font-weight: normal;
}
@font-face {
  font-family: "Agate th";
  src: local("Noto Sans Thai Regular");
  font-weight: 300;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Thai Regular");
  font-weight: 300;
}
@font-face {
  font-family: "Agate th";
  src: local("Noto Sans Thai Bold");
  font-weight: 600;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Thai Bold");
  font-weight: 600;
}
@font-face {
  font-family: "Agate th";
  src: local("Noto Sans Thai Bold");
  font-weight: 700;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Thai Bold");
  font-weight: 700;
}
@font-face {
  font-family: "Agate zh-HK";
  src: local("Noto Sans CJK KR Regular");
  font-weight: normal;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans CJK KR Regular");
  font-weight: normal;
}
@font-face {
  font-family: "Agate zh-HK";
  src: local("Noto Sans CJK KR Regular");
  font-weight: 300;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans CJK KR Regular");
  font-weight: 300;
}
@font-face {
  font-family: "Agate zh-HK";
  src: local("Noto Sans CJK KR Bold");
  font-weight: 600;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans CJK KR Bold");
  font-weight: 600;
}
@font-face {
  font-family: "Agate zh-HK";
  src: local("Noto Sans CJK KR Bold");
  font-weight: 700;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans CJK KR Bold");
  font-weight: 700;
}
@font-face {
  font-family: "Agate zh-TW";
  src: local("Noto Sans CJK KR Regular");
  font-weight: normal;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans CJK KR Regular");
  font-weight: normal;
}
@font-face {
  font-family: "Agate zh-TW";
  src: local("Noto Sans CJK KR Regular");
  font-weight: 300;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans CJK KR Regular");
  font-weight: 300;
}
@font-face {
  font-family: "Agate zh-TW";
  src: local("Noto Sans CJK KR Bold");
  font-weight: 600;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans CJK KR Bold");
  font-weight: 600;
}
@font-face {
  font-family: "Agate zh-TW";
  src: local("Noto Sans CJK KR Bold");
  font-weight: 700;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans CJK KR Bold");
  font-weight: 700;
}
@font-face {
  font-family: "Agate si";
  src: local("Noto Sans Sinhala Regular");
  font-weight: normal;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Sinhala Regular");
  font-weight: normal;
}
@font-face {
  font-family: "Agate si";
  src: local("Noto Sans Sinhala Regular");
  font-weight: 300;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Sinhala Regular");
  font-weight: 300;
}
@font-face {
  font-family: "Agate si";
  src: local("Noto Sans Sinhala Bold");
  font-weight: 600;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Sinhala Bold");
  font-weight: 600;
}
@font-face {
  font-family: "Agate si";
  src: local("Noto Sans Sinhala Bold");
  font-weight: 700;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Sinhala Bold");
  font-weight: 700;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Regular"), local("Noto Sans"), local("Museo Sans"), url(../fonts/MuseoSans/MuseoSans-Light.ttf) format("truetype");
  font-weight: normal;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Thin"), local("Noto Sans"), local("Museo Sans"), url(../fonts/MuseoSans/MuseoSans-Thin.ttf) format("truetype");
  font-weight: 100;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans ExtraLight"), local("Noto Sans"), local("Museo Sans"), url(../fonts/MuseoSans/MuseoSans-Thin.ttf) format("truetype");
  font-weight: 200;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Light"), local("Noto Sans"), local("Museo Sans"), url(../fonts/MuseoSans/MuseoSans-Light.ttf) format("truetype");
  font-weight: 300;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Regular"), local("Noto Sans"), local("Museo Sans"), url(../fonts/MuseoSans/MuseoSans-Light.ttf) format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Medium"), local("Noto Sans"), local("Museo Sans"), url(../fonts/MuseoSans/MuseoSans-Medium.ttf) format("truetype");
  font-weight: 500;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans SemiBold"), local("Noto Sans"), local("Museo Sans"), url(../fonts/MuseoSans/MuseoSans-Medium.ttf) format("truetype");
  font-weight: 600;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Bold"), local("Noto Sans"), local("Museo Sans"), url(../fonts/MuseoSans/MuseoSans-Bold.ttf) format("truetype");
  font-weight: 700;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans ExtraBold"), local("Noto Sans"), local("Museo Sans"), url(../fonts/MuseoSans/MuseoSans-Medium.ttf) format("truetype");
  font-weight: 800;
}
@font-face {
  font-family: "Agate";
  src: local("Noto Sans Black"), local("Noto Sans"), local("Museo Sans"), url(../fonts/MuseoSans/MuseoSans-Black.ttf) format("truetype");
  font-weight: 900;
}
/* Prevent browser's default focus treatment (at least in Chrome) */
:focus {
  outline: none;
}
:global(.carbon) ::selection {
  color: black;
  background-color: var(--agate-highlight-color, #6abe0b);
}
:global(.spotlight-input-key) :global(.carbon) :global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.carbon) :global(.spottable):focus {
  color: black;
  background-color: var(--agate-highlight-color, #6abe0b);
  background-image: linear-gradient(to bottom, hsla(var(--agate-accent-h, 0), var(--agate-accent-s, 0), var(--agate-accent-l, 0), 0.5), var(--agate-accent-color, #8fd43a));
}
:global(.spotlight-input-touch) :global(.carbon) :global(.spottable):active {
  color: black;
  background-color: var(--agate-highlight-color, #6abe0b);
  background-image: linear-gradient(to bottom, hsla(var(--agate-accent-h, 0), var(--agate-accent-s, 0), var(--agate-accent-l, 0), 0.5), var(--agate-accent-color, #8fd43a));
}
:global(.spotlight-input-key) :global(.carbon):global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.carbon):global(.spottable):focus {
  color: black;
  background-color: var(--agate-highlight-color, #6abe0b);
  background-image: linear-gradient(to bottom, hsla(var(--agate-accent-h, 0), var(--agate-accent-s, 0), var(--agate-accent-l, 0), 0.5), var(--agate-accent-color, #8fd43a));
}
:global(.spotlight-input-touch) :global(.carbon):global(.spottable):active {
  color: black;
  background-color: var(--agate-highlight-color, #6abe0b);
  background-image: linear-gradient(to bottom, hsla(var(--agate-accent-h, 0), var(--agate-accent-s, 0), var(--agate-accent-l, 0), 0.5), var(--agate-accent-color, #8fd43a));
}
:global(.carbon)[disabled] {
  opacity: 0.6;
  filter: alpha(opacity=60);
  cursor: default;
}
:global(.carbon)[disabled] [disabled] {
  opacity: 1;
  filter: alpha(opacity=100);
}
:global(.cobalt) ::selection {
  color: var(--agate-accent-color, #8c81ff);
  background-color: var(--agate-highlight-color, #fff);
}
:global(.spotlight-input-key) :global(.cobalt) :global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.cobalt) :global(.spottable):focus {
  color: var(--agate-accent-color, #8c81ff);
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.spotlight-input-touch) :global(.cobalt) :global(.spottable):active {
  color: var(--agate-accent-color, #8c81ff);
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.spotlight-input-key) :global(.cobalt):global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.cobalt):global(.spottable):focus {
  color: var(--agate-accent-color, #8c81ff);
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.spotlight-input-touch) :global(.cobalt):global(.spottable):active {
  color: var(--agate-accent-color, #8c81ff);
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.cobalt)[disabled] {
  opacity: 0.6;
  filter: alpha(opacity=60);
  cursor: default;
}
:global(.cobalt)[disabled] [disabled] {
  opacity: 1;
  filter: alpha(opacity=100);
}
:global(.cobalt):global(.night) ::selection {
  color: #373739;
  background-color: var(--agate-highlight-color, #fff);
}
:global(.spotlight-input-key) :global(.cobalt):global(.night) :global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.cobalt):global(.night) :global(.spottable):focus {
  color: #373739;
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.spotlight-input-touch) :global(.cobalt):global(.night) :global(.spottable):active {
  color: #373739;
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.spotlight-input-key) :global(.cobalt):global(.night):global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.cobalt):global(.night):global(.spottable):focus {
  color: #373739;
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.spotlight-input-touch) :global(.cobalt):global(.night):global(.spottable):active {
  color: #373739;
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.cobalt):global(.night)[disabled] {
  opacity: 0.6;
  filter: alpha(opacity=60);
  cursor: default;
}
:global(.cobalt):global(.night)[disabled] [disabled] {
  opacity: 1;
  filter: alpha(opacity=100);
}
:global(.copper) ::selection {
  color: var(--agate-accent-color, #a47d66);
  background-color: var(--agate-highlight-color, #fff);
}
:global(.spotlight-input-key) :global(.copper) :global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.copper) :global(.spottable):focus {
  color: var(--agate-accent-color, #a47d66);
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.spotlight-input-touch) :global(.copper) :global(.spottable):active {
  color: var(--agate-accent-color, #a47d66);
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.spotlight-input-key) :global(.copper):global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.copper):global(.spottable):focus {
  color: var(--agate-accent-color, #a47d66);
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.spotlight-input-touch) :global(.copper):global(.spottable):active {
  color: var(--agate-accent-color, #a47d66);
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.copper)[disabled] {
  opacity: 0.6;
  filter: alpha(opacity=60);
  cursor: default;
}
:global(.copper)[disabled] [disabled] {
  opacity: 1;
  filter: alpha(opacity=100);
}
:global(.copper):global(.night) ::selection {
  color: #373739;
  background-color: var(--agate-highlight-color, #fff);
}
:global(.spotlight-input-key) :global(.copper):global(.night) :global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.copper):global(.night) :global(.spottable):focus {
  color: #373739;
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.spotlight-input-touch) :global(.copper):global(.night) :global(.spottable):active {
  color: #373739;
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.spotlight-input-key) :global(.copper):global(.night):global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.copper):global(.night):global(.spottable):focus {
  color: #373739;
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.spotlight-input-touch) :global(.copper):global(.night):global(.spottable):active {
  color: #373739;
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
}
:global(.copper):global(.night)[disabled] {
  opacity: 0.6;
  filter: alpha(opacity=60);
  cursor: default;
}
:global(.copper):global(.night)[disabled] [disabled] {
  opacity: 1;
  filter: alpha(opacity=100);
}
:global(.electro) ::selection {
  color: white;
  background-color: hsla( calc( var(--agate-accent-h, 218) - 27), calc( var(--agate-accent-s, 98%) - 1%), calc( var(--agate-accent-l, 48%) + 17%) , 0.7);
}
:global(.spotlight-input-key) :global(.electro) :global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.electro) :global(.spottable):focus {
  color: white;
  background-color: hsla( calc( var(--agate-accent-h, 218) - 27), calc( var(--agate-accent-s, 98%) - 1%), calc( var(--agate-accent-l, 48%) + 17%) , 0.7);
  background-image: linear-gradient(to bottom right, hsl( calc( var(--agate-accent-h, 218) - 27), calc( var(--agate-accent-s, 98%) - 1%), calc( var(--agate-accent-l, 48%) + 17%) ), transparent);
}
:global(.spotlight-input-touch) :global(.electro) :global(.spottable):active {
  color: white;
  background-color: hsla( calc( var(--agate-accent-h, 218) - 27), calc( var(--agate-accent-s, 98%) - 1%), calc( var(--agate-accent-l, 48%) + 17%) , 0.7);
  background-image: linear-gradient(to bottom right, hsl( calc( var(--agate-accent-h, 218) - 27), calc( var(--agate-accent-s, 98%) - 1%), calc( var(--agate-accent-l, 48%) + 17%) ), transparent);
}
:global(.spotlight-input-key) :global(.electro):global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.electro):global(.spottable):focus {
  color: white;
  background-color: hsla( calc( var(--agate-accent-h, 218) - 27), calc( var(--agate-accent-s, 98%) - 1%), calc( var(--agate-accent-l, 48%) + 17%) , 0.7);
  background-image: linear-gradient(to bottom right, hsl( calc( var(--agate-accent-h, 218) - 27), calc( var(--agate-accent-s, 98%) - 1%), calc( var(--agate-accent-l, 48%) + 17%) ), transparent);
}
:global(.spotlight-input-touch) :global(.electro):global(.spottable):active {
  color: white;
  background-color: hsla( calc( var(--agate-accent-h, 218) - 27), calc( var(--agate-accent-s, 98%) - 1%), calc( var(--agate-accent-l, 48%) + 17%) , 0.7);
  background-image: linear-gradient(to bottom right, hsl( calc( var(--agate-accent-h, 218) - 27), calc( var(--agate-accent-s, 98%) - 1%), calc( var(--agate-accent-l, 48%) + 17%) ), transparent);
}
:global(.electro)[disabled] {
  opacity: 0.6;
  filter: alpha(opacity=60);
  cursor: default;
}
:global(.electro)[disabled] [disabled] {
  opacity: 1;
  filter: alpha(opacity=100);
}
:global(.gallium) ::selection {
  color: #ffffff;
  background-color: var(--agate-accent-color, #8b7efe);
}
:global(.spotlight-input-key) :global(.gallium) :global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.gallium) :global(.spottable):focus {
  color: #ffffff;
  background-color: var(--agate-accent-color, #8b7efe);
  background-image: none;
}
:global(.spotlight-input-touch) :global(.gallium) :global(.spottable):active {
  color: #ffffff;
  background-color: var(--agate-accent-color, #8b7efe);
  background-image: none;
}
:global(.spotlight-input-key) :global(.gallium):global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.gallium):global(.spottable):focus {
  color: #ffffff;
  background-color: var(--agate-accent-color, #8b7efe);
  background-image: none;
}
:global(.spotlight-input-touch) :global(.gallium):global(.spottable):active {
  color: #ffffff;
  background-color: var(--agate-accent-color, #8b7efe);
  background-image: none;
}
:global(.gallium)[disabled] {
  opacity: 0.6;
  filter: alpha(opacity=60);
  cursor: default;
}
:global(.gallium)[disabled] [disabled] {
  opacity: 1;
  filter: alpha(opacity=100);
}
:global(.gallium):global(.night) ::selection {
  color: #ffffff;
  background-color: var(--agate-accent-color, #8b7efe);
}
:global(.spotlight-input-key) :global(.gallium):global(.night) :global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.gallium):global(.night) :global(.spottable):focus {
  color: #ffffff;
  background-color: var(--agate-accent-color, #8b7efe);
  background-image: none;
}
:global(.spotlight-input-touch) :global(.gallium):global(.night) :global(.spottable):active {
  color: #ffffff;
  background-color: var(--agate-accent-color, #8b7efe);
  background-image: none;
}
:global(.spotlight-input-key) :global(.gallium):global(.night):global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.gallium):global(.night):global(.spottable):focus {
  color: #ffffff;
  background-color: var(--agate-accent-color, #8b7efe);
  background-image: none;
}
:global(.spotlight-input-touch) :global(.gallium):global(.night):global(.spottable):active {
  color: #ffffff;
  background-color: var(--agate-accent-color, #8b7efe);
  background-image: none;
}
:global(.gallium):global(.night)[disabled] {
  opacity: 0.6;
  filter: alpha(opacity=60);
  cursor: default;
}
:global(.gallium):global(.night)[disabled] [disabled] {
  opacity: 1;
  filter: alpha(opacity=100);
}
:global(.silicon) ::selection {
  color: #ffffff;
  background-color: var(--agate-accent-color, #ff2d55);
}
:global(.spotlight-input-key) :global(.silicon) :global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.silicon) :global(.spottable):focus {
  color: #ffffff;
  background-color: var(--agate-accent-color, #ff2d55);
  background-image: none;
}
:global(.spotlight-input-touch) :global(.silicon) :global(.spottable):active {
  color: #ffffff;
  background-color: var(--agate-accent-color, #ff2d55);
  background-image: none;
}
:global(.spotlight-input-key) :global(.silicon):global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.silicon):global(.spottable):focus {
  color: #ffffff;
  background-color: var(--agate-accent-color, #ff2d55);
  background-image: none;
}
:global(.spotlight-input-touch) :global(.silicon):global(.spottable):active {
  color: #ffffff;
  background-color: var(--agate-accent-color, #ff2d55);
  background-image: none;
}
:global(.silicon)[disabled] {
  opacity: 0.6;
  filter: alpha(opacity=60);
  cursor: default;
}
:global(.silicon)[disabled] [disabled] {
  opacity: 1;
  filter: alpha(opacity=100);
}
:global(.silicon):global(.night) ::selection {
  color: #ffffff;
  background-color: var(--agate-accent-color, #ff2d55);
}
:global(.spotlight-input-key) :global(.silicon):global(.night) :global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.silicon):global(.night) :global(.spottable):focus {
  color: #ffffff;
  background-color: var(--agate-accent-color, #ff2d55);
  background-image: none;
}
:global(.spotlight-input-touch) :global(.silicon):global(.night) :global(.spottable):active {
  color: #ffffff;
  background-color: var(--agate-accent-color, #ff2d55);
  background-image: none;
}
:global(.spotlight-input-key) :global(.silicon):global(.night):global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.silicon):global(.night):global(.spottable):focus {
  color: #ffffff;
  background-color: var(--agate-accent-color, #ff2d55);
  background-image: none;
}
:global(.spotlight-input-touch) :global(.silicon):global(.night):global(.spottable):active {
  color: #ffffff;
  background-color: var(--agate-accent-color, #ff2d55);
  background-image: none;
}
:global(.silicon):global(.night)[disabled] {
  opacity: 0.6;
  filter: alpha(opacity=60);
  cursor: default;
}
:global(.silicon):global(.night)[disabled] [disabled] {
  opacity: 1;
  filter: alpha(opacity=100);
}
:global(.titanium) ::selection {
  color: white;
  background-color: var(--agate-highlight-color, #2a48ca);
}
:global(.spotlight-input-key) :global(.titanium) :global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.titanium) :global(.spottable):focus {
  color: white;
  background-color: var(--agate-highlight-color, #2a48ca);
  background-image: none;
}
:global(.spotlight-input-touch) :global(.titanium) :global(.spottable):active {
  color: white;
  background-color: var(--agate-highlight-color, #2a48ca);
  background-image: none;
}
:global(.spotlight-input-key) :global(.titanium):global(.spottable):focus,
:global(.spotlight-input-mouse) :global(.titanium):global(.spottable):focus {
  color: white;
  background-color: var(--agate-highlight-color, #2a48ca);
  background-image: none;
}
:global(.spotlight-input-touch) :global(.titanium):global(.spottable):active {
  color: white;
  background-color: var(--agate-highlight-color, #2a48ca);
  background-image: none;
}
:global(.titanium)[disabled] {
  opacity: 0.6;
  filter: alpha(opacity=60);
  cursor: default;
}
:global(.titanium)[disabled] [disabled] {
  opacity: 1;
  filter: alpha(opacity=100);
}
.root {
  font-style: normal;
  letter-spacing: normal;
  overflow: hidden;
}
.root:global(.enact-locale-right-to-left) {
  direction: rtl;
}
.root:global(.carbon) {
  font-family: "Agate", sans-serif;
  font-weight: normal;
  font-size: 1rem;
  font-variant-ligatures: normal;
  color: rgba(255, 255, 255, 0.75);
}
.root:global(.carbon).bg::before {
  content: "";
  display: block;
  background-image: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.root:global(.cobalt) {
  font-family: "Agate", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  font-variant-ligatures: none;
  color: var(--agate-accent-color, #8c81ff);
}
.root:global(.cobalt).bg::before {
  content: "";
  display: block;
  background-image: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.root:global(.cobalt):global(.night) {
  font-family: "Agate", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  font-variant-ligatures: none;
  color: #7482bf;
}
.root:global(.cobalt):global(.night).bg::before {
  content: "";
  display: block;
  background-image: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.root:global(.copper) {
  font-family: "Agate", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  font-variant-ligatures: none;
  color: #d8d8d8;
}
.root:global(.copper).bg::before {
  content: "";
  display: block;
  background-image: url(../assets/noise-black.png);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.root:global(.copper):global(.night) {
  font-family: "Agate", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  font-variant-ligatures: none;
  color: var(--agate-accent-color, #e0b094);
}
.root:global(.copper):global(.night).bg::before {
  content: "";
  display: block;
  background-image: url(../assets/noise-white.png);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.root:global(.electro) {
  font-family: "Agate", sans-serif;
  font-weight: normal;
  font-size: 1rem;
  font-variant-ligatures: normal;
  color: white;
}
.root:global(.electro).bg::before {
  content: "";
  display: block;
  background-image: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.root:global(.gallium) {
  font-family: "Agate", sans-serif;
  font-weight: normal;
  font-size: 1rem;
  font-variant-ligatures: normal;
  color: #000000;
}
.root:global(.gallium).bg::before {
  content: "";
  display: block;
  background-image: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.root:global(.gallium):global(.night) {
  font-family: "Agate", sans-serif;
  font-weight: normal;
  font-size: 1rem;
  font-variant-ligatures: normal;
  color: #ffffff;
}
.root:global(.gallium):global(.night).bg::before {
  content: "";
  display: block;
  background-image: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.root:global(.silicon) {
  font-family: "Agate", sans-serif;
  font-weight: normal;
  font-size: 1rem;
  font-variant-ligatures: normal;
  color: #000000;
}
.root:global(.silicon).bg::before {
  content: "";
  display: block;
  background-image: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.root:global(.silicon):global(.night) {
  font-family: "Agate", sans-serif;
  font-weight: normal;
  font-size: 1rem;
  font-variant-ligatures: normal;
  color: #ffffff;
}
.root:global(.silicon):global(.night).bg::before {
  content: "";
  display: block;
  background-image: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.root:global(.titanium) {
  font-family: "Agate", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  font-variant-ligatures: normal;
  color: #4d4d4d;
}
.root:global(.titanium).bg::before {
  content: "";
  display: block;
  background-image: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
:global(.carbon).bg,
:global(.carbon) > .bg {
  background-color: black;
  background-image: none;
}
:global(.cobalt).bg,
:global(.cobalt) > .bg {
  background-color: #ededed;
  background-image: radial-gradient(hsla(var(--agate-accent-h, 0), var(--agate-accent-s, 0), var(--agate-accent-l, 0), 0.2), transparent 60%), linear-gradient(to bottom, #ededed 43%, #fff 90%);
}
:global(.cobalt):global(.night).bg,
:global(.cobalt):global(.night) > .bg {
  background-color: #44559f;
  background-image: radial-gradient(hsla(var(--agate-accent-h, 0), var(--agate-accent-s, 0%), var(--agate-accent-l, 0%), 0.2), transparent 60%), linear-gradient(to bottom, #44559f 43%, #44559f 90%);
}
:global(.copper).bg,
:global(.copper) > .bg {
  background-color: #ededed;
  background-image: radial-gradient(hsla(var(--agate-accent-h, 0), var(--agate-accent-s, 0), var(--agate-accent-l, 0), 0.2), transparent 60%), linear-gradient(to bottom, #ededed 43%, #fff 90%);
}
:global(.copper):global(.night).bg,
:global(.copper):global(.night) > .bg {
  background-color: #373739;
  background-image: radial-gradient(hsla(var(--agate-accent-h, 0), var(--agate-accent-s, 0%), var(--agate-accent-l, 0%), 0.2), transparent 60%), linear-gradient(to bottom, #14191d 43%, #040213 90%);
}
:global(.electro).bg,
:global(.electro) > .bg {
  background-color: #1c0d3f;
  background-image: none;
}
:global(.gallium).bg,
:global(.gallium) > .bg {
  background-color: #ffffff;
  background-image: none;
}
:global(.gallium):global(.night).bg,
:global(.gallium):global(.night) > .bg {
  background-color: #000000;
  background-image: none;
}
:global(.silicon).bg,
:global(.silicon) > .bg {
  background-color: #ffffff;
  background-image: none;
}
:global(.silicon):global(.night).bg,
:global(.silicon):global(.night) > .bg {
  background-color: #000000;
  background-image: none;
}
:global(.titanium).bg,
:global(.titanium) > .bg {
  background-color: #ddd;
  background-image: none;
}
