/* Hosted demo theme controls. Geometry is independent of the tester. */
#speedtest .st-themes{
  --st-theme-button-width:156px;
  margin-top:var(--st-space-8);
  padding-block:var(--st-space-6);
  border-top:1px solid var(--st-border);
  text-align:center}
#speedtest #st-themes-description{
  margin-block:var(--st-space-2) var(--st-space-4);
  color:var(--st-muted)}
#speedtest .st-theme-options{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--st-space-2);
  max-width:calc(5 * var(--st-theme-button-width) + 4 * var(--st-space-2));
  margin-inline:auto}
#speedtest .st-themes button{
  display:inline-flex;
  justify-content:center;
  flex:0 0 var(--st-theme-button-width);
  min-width:0;
  font-size:14px;
  white-space:normal;
  align-items:center;
  gap:var(--st-space-2);
  border:1px solid var(--st-border);
  border-radius:var(--st-action-radius);
  background:var(--st-surface);
  color:var(--st-text);
  min-height:44px;
  height:100%;
  padding:var(--st-space-2) var(--st-space-3)}
#speedtest .st-theme-swatch{
  width:16px;
  height:16px;
  flex:none;
  border-radius:50%;
  background:var(--st-swatch)}
#speedtest .st-themes button:hover{background:var(--st-highlight)}
#speedtest .st-themes button:active{background:color-mix(in srgb,var(--st-primary) 18%,var(--st-surface))}
#speedtest .st-themes button[aria-pressed=true]{
  border-color:var(--twoip-primary);
  box-shadow:inset 0 0 0 1px var(--twoip-primary);
  background:var(--st-highlight)}
@media(max-width:900px){
  #speedtest .st-theme-options{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:767px){
  #speedtest .st-theme-options{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:calc(2 * var(--st-theme-button-width) + var(--st-space-2));
    max-width:100%}
}
@media(max-width:359px){
  #speedtest .st-theme-options{grid-template-columns:minmax(0,1fr);width:var(--st-theme-button-width)}
}
#speedtest .st-themes button:focus-visible{outline:3px solid var(--twoip-primary);outline-offset:4px}