diff --git a/examples/examples.pro b/examples/examples.pro
index 98635a05..e691a3f0 100644
--- a/examples/examples.pro
+++ b/examples/examples.pro
@@ -7,6 +7,7 @@ SUBDIRS += \
     qvgviewer \
     desktop \
     dialogbuttons \
+    hmi-demo \
     layouts \
     listbox \
     messagebox \
diff --git a/examples/hmi-demo/DefaultSkin.cpp b/examples/hmi-demo/DefaultSkin.cpp
new file mode 100644
index 00000000..7bcd83ba
--- /dev/null
+++ b/examples/hmi-demo/DefaultSkin.cpp
@@ -0,0 +1,135 @@
+#include "DefaultSkin.h"
+
+#include "SoundControl.h"
+
+#include <QskBox.h>
+#include <QskFunctions.h>
+#include <QskPushButton.h>
+#include <QskSkinTransition.h>
+#include <QskSlider.h>
+#include <QskTextLabel.h>
+
+#include <QDebug>
+
+class DefaultSkin::Transition : public QskSkinTransition
+{
+protected:
+    virtual void updateSkin( QskSkin*, QskSkin* newSkin ) override final
+    {
+        DefaultSkin* skin = static_cast< DefaultSkin* >( newSkin );
+        skin->resetColors();
+    }
+};
+
+class Palette {
+public:
+
+    Palette( DefaultSkin::Scheme scheme = DefaultSkin::Daylight )
+    {
+        if ( scheme == DefaultSkin::Daylight )
+        {
+            // colorful:
+            color1.setNamedColor( "#011627" ); // Maastricht blue
+            color2.setNamedColor( "#FF0022" ); // ruddy
+            color3.setNamedColor( "#41EAD4" ); // Turquoise
+            color4.setNamedColor( "#FDFFFC" ); // baby powder
+            color5.setNamedColor( "#B91372" ); // red violet
+        }
+        else
+        {
+            // greenish:
+            color4.setNamedColor( "#FAF3DD" ); // Beige
+            color2.setNamedColor( "#C8D5B9" ); // Pale Silver
+            color3.setNamedColor( "#8FC0A9" ); // Eton Blue
+            color1.setNamedColor( "#68B0AB" ); // Green Sheen
+            color5.setNamedColor( "#4A7C59" ); // Amazon
+        }
+    }
+
+    QColor color1;
+    QColor color2;
+    QColor color3;
+    QColor color4;
+    QColor color5;
+
+};
+
+namespace {
+
+static inline QFont qskFont( int pointSize )
+{
+    QFont font( "Roboto" );
+    font.setPointSize( pointSize / qskDpiScaled( 1.0 ) );
+    return font;
+}
+
+}
+
+DefaultSkin::DefaultSkin( const QString &name, QObject *parent )
+    : QskSkin( parent ),
+      m_name( name ),
+      m_palette( new Palette ),
+      m_scheme( Daylight )
+{
+    setObjectName( "DefaultSkin" );
+    initHints();
+}
+
+void DefaultSkin::initHints()
+{
+    setFont( QskSkin::DefaultFont, qskFont( 13 ) );
+    setFont( QskSkin::LargeFont, qskFont( 20 ) );
+
+    setColor( QskTextLabel::Text, m_palette->color4 );
+
+    setColor( FilledRectangle::Panel, m_palette->color3 );
+
+    setColor( QskPushButton::Panel, m_palette->color1 );
+    setColor( QskPushButton::Text, m_palette->color3 );
+    setColor( QskPushButton::Panel | QskPushButton::Pressed, m_palette->color2 );
+    setMetric( QskPushButton::Text | QskAspect::Size, 20 );
+    setSkinHint( QskPushButton::Text | QskAspect::FontRole, int( QskSkin::LargeFont ) );
+    setSkinHint( QskPushButton::Text | QskAspect::Alignment, Qt::AlignCenter );
+
+    setMetric( QskSlider::Panel | QskAspect::Size, 5 );
+    setColor( QskSlider::Groove, m_palette->color4 );
+    setColor( QskSlider::Fill, m_palette->color4.darker( 200 ) );
+    setMetric( QskSlider::Handle | QskAspect::Size, 18 );
+    setMetric( QskSlider::Handle | QskAspect::Radius, 9 );
+    setColor( QskSlider::Handle, m_palette->color5 );
+
+    setColor( BalanceFadeBox::Panel, m_palette->color5 );
+    setMetric( BalanceFadeBox::Panel | QskAspect::Radius, 15 );
+
+    // animator for daylight/night scheme transitions
+    setAnimation( QskAspect::Color, QskAnimationHint( 1000, QEasingCurve::InQuad ) );
+}
+
+void DefaultSkin::toggleScheme()
+{
+    if ( m_scheme == Daylight )
+        m_scheme = Nighttime;
+    else
+        m_scheme = Daylight;
+
+    Transition transition;
+
+    transition.setSourceSkin( this );
+    transition.setTargetSkin( this );
+    transition.setMask( QskSkinTransition::Color );
+    transition.setAnimation( animation( QskAspect::Color ) );
+
+    transition.process();
+}
+
+void DefaultSkin::resetColors()
+{
+    delete m_palette;
+    m_palette = new Palette( m_scheme );
+    initHints();
+}
+
+DefaultSkin::~DefaultSkin()
+{
+    delete m_palette;
+}
diff --git a/examples/hmi-demo/DefaultSkin.h b/examples/hmi-demo/DefaultSkin.h
new file mode 100644
index 00000000..7d817a0e
--- /dev/null
+++ b/examples/hmi-demo/DefaultSkin.h
@@ -0,0 +1,32 @@
+#ifndef DEFAULTSKIN_H
+#define DEFAULTSKIN_H
+
+#include <QskSkin.h>
+
+class Palette;
+
+class DefaultSkin : public QskSkin
+{
+public:
+    DefaultSkin( const QString& name, QObject* parent = nullptr );
+    virtual ~DefaultSkin();
+
+    void toggleScheme();
+    void resetColors();
+
+    enum Scheme {
+        Daylight,
+        Nighttime
+    };
+
+private:
+    class Transition;
+
+    void initHints();
+
+    QString m_name;
+    Palette* m_palette;
+    Scheme m_scheme;
+};
+
+#endif // DEFAULTSKIN_H
diff --git a/examples/hmi-demo/MainWindow.cpp b/examples/hmi-demo/MainWindow.cpp
new file mode 100644
index 00000000..141291e5
--- /dev/null
+++ b/examples/hmi-demo/MainWindow.cpp
@@ -0,0 +1,102 @@
+#include "MainWindow.h"
+#include "RadioControl.h"
+#include "SoundControl.h"
+
+#include <QskGraphic.h>
+#include <QskGraphicLabel.h>
+#include <QskLinearBox.h>
+#include <QskPushButton.h>
+#include <QskSkin.h>
+#include <QskTextLabel.h>
+
+#include <QDate>
+#include <QTimer>
+
+namespace {
+    void addIcon( QskLayout* layout, const QString& fileName )
+    {
+        QImage buildIcon( fileName );
+        QskGraphic graphic = QskGraphic::fromImage( buildIcon );
+        QskGraphicLabel* buildLabel = new QskGraphicLabel( layout );
+        buildLabel->setFixedSize( 76, 36 );
+        buildLabel->setMargins( QMarginsF( 20, 7, 20, 7 ) );
+        buildLabel->setGraphic( graphic );
+    }
+}
+
+MainWindow::MainWindow() : QskWindow()
+  , m_backgroundImage( new QskGraphicLabel( contentItem() ) )
+  , m_layout( new QskLinearBox( Qt::Vertical, contentItem() ) )
+{
+    setPreferredSize( QSize( 1024, 576 ) );
+    setAutoLayoutChildren( true );
+
+    // later:
+//    QFont font( "Roboto" );
+//    font.setPointSize( 20 );
+//    setFont( QskSkin::DefaultFont, 20 );
+
+    QImage image( ":/images/background.jpg" );
+    QskGraphic graphic = QskGraphic::fromImage( image );
+    m_backgroundImage->setGraphic( graphic );
+
+    m_layout->setAutoAddChildren( true );
+
+    addHeaderBar();
+    addMainContent();
+    addBottomBar();
+}
+
+void MainWindow::addHeaderBar()
+{
+    QskPushButton* headerBar = new QskPushButton( m_layout );
+    headerBar->setEnabled( false );
+    headerBar->setPosition( QPointF( 0, 0 ) );
+    headerBar->setOpacity( 0.5 );
+    headerBar->setBackgroundColor( Qt::black );
+    headerBar->setFixedHeight( 50 );
+    headerBar->setFlat( true );
+    headerBar->setAutoLayoutChildren( true );
+
+    QskLinearBox* headerLayout = new QskLinearBox( headerBar );
+    headerLayout->setMargins( QMarginsF( 20, 0, 20, 0 ) );
+
+    addIcon( headerLayout, ":/images/ic_pan_tool_white_48dp_2x.png" );
+    addIcon( headerLayout, ":/images/ic_star_rate_white_18dp_2x.png" );
+    addIcon( headerLayout, ":/images/ic_airplanemode_active_white_18dp_2x.png" );
+
+    QDate currentDate = QDate::currentDate();
+    QskTextLabel* dateLabel = new QskTextLabel( currentDate.toString(), headerLayout );
+    dateLabel->setColor( QskTextLabel::Text, Qt::white );
+
+    addIcon( headerLayout, ":/images/ic_face_white_48px.svg" );
+    addIcon( headerLayout, ":/images/ic_extension_white_48dp_2x.png" );
+    addIcon( headerLayout, ":/images/ic_build_white_24dp_2x.png" );
+}
+
+void MainWindow::addMainContent()
+{
+//    RadioControl* radioControl = new RadioControl( m_layout );
+//    m_layout->setRetainSizeWhenHidden( radioControl, true );
+//    radioControl->setVisible( false );
+
+    SoundControl* soundControl = new SoundControl( m_layout );
+}
+
+void MainWindow::addBottomBar()
+{
+    QskPushButton* bottomBar = new QskPushButton( m_layout );
+    bottomBar->setEnabled( false );
+    bottomBar->setPosition( QPointF( 0, 0 ) );
+    bottomBar->setOpacity( 0.5 );
+    bottomBar->setBackgroundColor( Qt::black );
+    bottomBar->setFixedHeight( 50 );
+    bottomBar->setFlat( true );
+
+    QskLinearBox* bottomLayout = new QskLinearBox( bottomBar );
+    bottomLayout->setMargins( QMarginsF( 20, 0, 20, 0 ) );
+
+    addIcon( bottomLayout, ":/images/ic_pan_tool_white_48dp_2x.png" );
+    addIcon( bottomLayout, ":/images/ic_star_rate_white_18dp_2x.png" );
+    addIcon( bottomLayout, ":/images/ic_airplanemode_active_white_18dp_2x.png" );
+}
diff --git a/examples/hmi-demo/MainWindow.h b/examples/hmi-demo/MainWindow.h
new file mode 100644
index 00000000..f6272ca4
--- /dev/null
+++ b/examples/hmi-demo/MainWindow.h
@@ -0,0 +1,24 @@
+#ifndef MAINWINDOW_H
+#define MAINWINDOW_H
+
+#include <QskPushButton.h>
+#include <QskWindow.h>
+
+class QskGraphicLabel;
+class QskLinearBox;
+
+class MainWindow : public QskWindow
+{
+public:
+    MainWindow();
+
+private:
+    void addHeaderBar();
+    void addMainContent();
+    void addBottomBar();
+
+    QskGraphicLabel* m_backgroundImage;
+    QskLinearBox* m_layout;
+};
+
+#endif // MAINWINDOW_H
diff --git a/examples/hmi-demo/OtherSkin.cpp b/examples/hmi-demo/OtherSkin.cpp
new file mode 100644
index 00000000..9adf0ae9
--- /dev/null
+++ b/examples/hmi-demo/OtherSkin.cpp
@@ -0,0 +1,84 @@
+#include "OtherSkin.h"
+
+#include "SoundControl.h"
+
+#include <QskFunctions.h>
+#include <QskPushButton.h>
+#include <QskSkinTransition.h>
+#include <QskSlider.h>
+#include <QskTextLabel.h>
+
+#include <QDebug>
+
+class Palette {
+public:
+
+    Palette()
+    {
+        // grey-blue-yellow:
+        color1.setNamedColor( "#363636" ); // Jet
+        color2.setNamedColor( "#242F40" ); // Yankees blue
+        color3.setNamedColor( "#CCA43B" ); // Satin sheet gold
+        color4.setNamedColor( "#E5E5E5" ); // Platinum
+        color5.setNamedColor( "#FFFFFF" ); // white
+    }
+
+    QColor color1;
+    QColor color2;
+    QColor color3;
+    QColor color4;
+    QColor color5;
+
+};
+
+namespace {
+
+static inline QFont qskFont( int pointSize )
+{
+    QFont font( "Roboto" );
+    font.setPointSize( pointSize / qskDpiScaled( 1.0 ) );
+    return font;
+}
+
+}
+
+OtherSkin::OtherSkin( const QString &name, QObject *parent )
+    : QskSkin( parent ),
+      m_name( name ),
+      m_palette( new Palette )
+{
+    setObjectName( "OtherSkin" );
+    initHints();
+}
+
+void OtherSkin::initHints()
+{
+    setFont( QskSkin::DefaultFont, qskFont( 13 ) );
+    setFont( QskSkin::LargeFont, qskFont( 20 ) );
+
+    setColor( QskTextLabel::Text, m_palette->color4 );
+
+    setColor( FilledRectangle::Panel, m_palette->color3 );
+
+    setColor( QskPushButton::Panel, m_palette->color1 );
+    setColor( QskPushButton::Text, m_palette->color3 );
+    setMetric( QskPushButton::Text | QskAspect::Size, 20 );
+    setSkinHint( QskPushButton::Text | QskAspect::FontRole, int( QskSkin::LargeFont ) );
+    setSkinHint( QskPushButton::Text | QskAspect::Alignment, Qt::AlignCenter );
+
+    setMetric( QskSlider::Panel | QskAspect::Size, 5 );
+    setColor( QskSlider::Groove, m_palette->color4 );
+    setColor( QskSlider::Fill, m_palette->color4.darker( 200 ) );
+    setMetric( QskSlider::Handle | QskAspect::Size, 18 );
+    setMetric( QskSlider::Handle | QskAspect::Radius, 9 );
+    setColor( QskSlider::Handle, m_palette->color5 );
+
+    setColor( BalanceFadeBox::Panel, m_palette->color5 );
+    setMetric( BalanceFadeBox::Panel | QskAspect::Radius, 15 );
+
+}
+
+OtherSkin::~OtherSkin()
+{
+    delete m_palette;
+}
diff --git a/examples/hmi-demo/OtherSkin.h b/examples/hmi-demo/OtherSkin.h
new file mode 100644
index 00000000..d5546db8
--- /dev/null
+++ b/examples/hmi-demo/OtherSkin.h
@@ -0,0 +1,21 @@
+#ifndef OTHERSKIN_H
+#define OTHERSKIN_H
+
+#include <QskSkin.h>
+
+class Palette;
+
+class OtherSkin : public QskSkin
+{
+public:
+    OtherSkin( const QString& name, QObject* parent = nullptr );
+    virtual ~OtherSkin();
+
+private:
+    void initHints();
+
+    QString m_name;
+    Palette* m_palette;
+};
+
+#endif // OTHERSKIN_H
diff --git a/examples/hmi-demo/README.images b/examples/hmi-demo/README.images
new file mode 100644
index 00000000..4c20831c
--- /dev/null
+++ b/examples/hmi-demo/README.images
@@ -0,0 +1,4 @@
+* background image: http://7-themes.com/collections/green-wallpapers/4440155/ , license unknown
+* car image: https://openclipart.org/detail/234440/white-blank-racing-car-top-view , unlimited commercial use
+* arrow images: https://www.flaticon.com/free-icon/right-arrow_108522 etc. made by Butterflytronics from www.flaticon.com
+* icons: https://www.flaticon.com/packs/material-design, made by Material Design from www.flaticon.com
diff --git a/examples/hmi-demo/RadioControl.cpp b/examples/hmi-demo/RadioControl.cpp
new file mode 100644
index 00000000..0d69a1f9
--- /dev/null
+++ b/examples/hmi-demo/RadioControl.cpp
@@ -0,0 +1,66 @@
+#include "RadioControl.h"
+
+#include <QskGraphic.h>
+#include <QskGraphicLabel.h>
+#include <QskLinearBox.h>
+#include <QskPushButton.h>
+#include <QskTabBar.h>
+#include <QskTabButton.h>
+#include <QskTextLabel.h>
+
+RadioControl::RadioControl( QQuickItem* parent ) : QskControl( parent )
+  , m_currentBand( "FM" )
+{
+    setMargins( QMarginsF( 40, 30, 40, 30 ) );
+    setAutoLayoutChildren( true );
+
+    QskLinearBox* outterLayout = new QskLinearBox( Qt::Vertical, this );
+    outterLayout->setAutoAddChildren( true );
+
+    QskTabBar* favoritesBar = new QskTabBar( outterLayout );
+    favoritesBar->addTab( "AM" );
+    favoritesBar->addTab( "FM" );
+    favoritesBar->addTab( "DAB" );
+
+    outterLayout->addSpacer( 80 );
+    outterLayout->setMargins( QMarginsF( 150, 0, 150, 0 ) );
+    outterLayout->setAlignment( 2, Qt::AlignHCenter );
+
+    QskPushButton* frequencyButton = new QskPushButton( outterLayout );
+    frequencyButton->setAutoLayoutChildren( true );
+    frequencyButton->setFlat( true );
+    frequencyButton->setBackgroundColor( QColor( 183, 210, 255 ) );
+    frequencyButton->setEnabled( false );
+    frequencyButton->setFixedWidth( 400 );
+
+    QskLinearBox* frequencyLayout = new QskLinearBox( Qt::Horizontal, frequencyButton );
+    frequencyLayout->setAutoAddChildren( true );
+    frequencyLayout->setMargins( QMarginsF( 150, 20, 150, 20 ) );
+
+    QskTextLabel* bandLabel = new QskTextLabel( m_currentBand, frequencyLayout );
+    QskTextLabel* frequencyLabel = new QskTextLabel( "87.50", frequencyLayout );
+    QskTextLabel* hzLabel = new QskTextLabel( "MHz", frequencyLayout );
+
+    QskLinearBox* tuneLayout = new QskLinearBox( Qt::Horizontal, outterLayout );
+    tuneLayout->setAutoLayoutChildren( true );
+
+    QskPushButton* prevTuneButton = new QskPushButton( tuneLayout );
+    QImage prevTuneImage( ":/images/ic_skip_previous_white_18dp_2x.png" );
+    QskGraphic prevTuneGraphic = QskGraphic::fromImage( prevTuneImage );
+    prevTuneButton->setGraphic( prevTuneGraphic );
+
+    QskPushButton* prevSearchButton = new QskPushButton( tuneLayout );
+    QImage prevSearchImage( ":/images/ic_fast_rewind_white_18dp_2x.png" );
+    QskGraphic prevSearchGraphic = QskGraphic::fromImage( prevSearchImage );
+    prevSearchButton->setGraphic( prevSearchGraphic );
+
+    QskPushButton* nextSearchButton = new QskPushButton( tuneLayout );
+    QImage nextSearchImage( ":/images/ic_fast_forward_white_18dp_2x.png" );
+    QskGraphic nextSearchGraphic = QskGraphic::fromImage( nextSearchImage );
+    nextSearchButton->setGraphic( nextSearchGraphic );
+
+    QskPushButton* nextTuneButton = new QskPushButton( tuneLayout );
+    QImage nextTuneImage( ":/images/ic_skip_next_white_18dp_1x.png" );
+    QskGraphic nextTuneGraphic = QskGraphic::fromImage( nextTuneImage );
+    nextTuneButton->setGraphic( nextTuneGraphic );
+}
diff --git a/examples/hmi-demo/RadioControl.h b/examples/hmi-demo/RadioControl.h
new file mode 100644
index 00000000..3e355ef9
--- /dev/null
+++ b/examples/hmi-demo/RadioControl.h
@@ -0,0 +1,17 @@
+#ifndef RADIOCONTROL_H
+#define RADIOCONTROL_H
+
+#include <QskControl.h>
+
+class QskLinearBox;
+
+class RadioControl : public QskControl
+{
+public:
+    RadioControl( QQuickItem *parent = nullptr );
+
+private:
+    QString m_currentBand;
+};
+
+#endif // RADIOCONTROL_H
diff --git a/examples/hmi-demo/SoundControl.cpp b/examples/hmi-demo/SoundControl.cpp
new file mode 100644
index 00000000..ed25c95e
--- /dev/null
+++ b/examples/hmi-demo/SoundControl.cpp
@@ -0,0 +1,291 @@
+#include "SoundControl.h"
+
+#include <QskGraphic.h>
+#include <QskGraphicLabel.h>
+#include <QskGraphicProvider.h>
+#include <QskGridBox.h>
+#include <QskLinearBox.h>
+#include <QskPushButton.h>
+#include <QskSlider.h>
+#include <QskTabBar.h>
+#include <QskTextLabel.h>
+
+#include <QImage>
+
+QSK_SUBCONTROL( FilledRectangle, Panel )
+
+QskAspect::Subcontrol FilledRectangle::effectiveSubcontrol(
+    QskAspect::Subcontrol subControl ) const
+{
+    if ( subControl == QskPushButton::Panel )
+        return FilledRectangle::Panel;
+
+    return subControl;
+}
+
+QSK_SUBCONTROL( BalanceFadeBox, Panel )
+
+QskAspect::Subcontrol BalanceFadeBox::effectiveSubcontrol(
+        QskAspect::Subcontrol subControl ) const
+{
+    if ( subControl == QskPushButton::Panel )
+        return BalanceFadeBox::Panel;
+
+    return subControl;
+}
+
+class StackedControl : public QskControl {
+public:
+    StackedControl( QQuickItem* parent = nullptr ) : QskControl( parent ),
+        m_offset( 0.0, 0.0 )
+    {
+    }
+
+    QPointF offset() const
+    {
+        return m_offset;
+    }
+
+    void setOffset( const QPointF& offset )
+    {
+        m_offset = offset;
+    }
+
+protected:
+    virtual void updateLayout() override final
+    {
+        const QRectF cr = contentsRect();
+
+        for ( int a = 0; a < children().count(); a++ )
+        {
+            QskControl* control = static_cast< QskControl* >( children().at( a ) );
+
+            qreal xCenter = ( cr.width() + margins().top() + margins().bottom() ) / 2;
+            qreal yCenter = ( cr.height() + margins().left() + margins().right() ) / 2;
+
+            if ( control->objectName() == "verticalBar" )
+            {
+                control->setPosition( QPointF( xCenter, margins().top() ) );
+                control->setSize( QSizeF( 3, cr.height() ) );
+                control->setZ( 1 );
+            }
+            else if ( control->objectName() == "horizontalBar" )
+            {
+                control->setPosition( QPointF( margins().left(), yCenter ) );
+                control->setSize( QSizeF( cr.width(), 3 ) );
+                control->setZ( 1 );
+            }
+            else if ( control->objectName() == "box" )
+            {
+                qreal size = 30;
+                control->setPosition( QPointF( xCenter - ( size / 2 ) + 1 + m_offset.x(),
+                                               yCenter - ( size / 2 ) + 1 + m_offset.y() ) );
+                control->setSize( QSizeF( size, size ) );
+                control->setZ( 2 );
+            }
+            else
+            {
+                control->setPosition( cr.topLeft() );
+                control->setSize( cr.size() );
+            }
+        }
+    }
+
+private:
+    QPointF m_offset;
+};
+
+SoundControl::SoundControl( QQuickItem *parent ) : QskControl( parent )
+{
+    setMargins( QMarginsF( 40, 20, 40, 20 ) );
+    setAutoLayoutChildren( true );
+
+    QskGridBox* outterLayout = new QskGridBox( this );
+    outterLayout->setVerticalSpacing( 40 );
+    outterLayout->setHorizontalSpacing( 60 );
+    outterLayout->setColumnStretchFactor( 0, 1 );
+    outterLayout->setColumnStretchFactor( 1, 2 );
+
+    QskLinearBox* toneBox = new QskLinearBox( Qt::Horizontal, outterLayout );
+    toneBox->setSpacing( 20 );
+    toneBox->setAutoAddChildren( true );
+    toneBox->setAutoLayoutChildren( true );
+    toneBox->addSpacer( 0, 1 );
+    FilledRectangle* toneRectangle = new FilledRectangle( toneBox );
+    QskTextLabel* toneLabel = new QskTextLabel( "Tone", toneBox );
+    toneLabel->setAlignment( Qt::AlignLeft );
+    toneRectangle->setFixedHeight(
+        QFontMetricsF( toneLabel->effectiveFont( QskTextLabel::Text ) ).height() );
+    toneBox->addSpacer( 0, 1 );
+    outterLayout->addItem( toneBox, 0, 0 );
+
+
+    QskLinearBox* balanceBox = new QskLinearBox( Qt::Horizontal, outterLayout );
+    balanceBox->setSpacing( 20 );
+    balanceBox->setAutoAddChildren( true );
+    balanceBox->setAutoLayoutChildren( true );
+    balanceBox->addSpacer( 0, 1 );
+    FilledRectangle* balanceRectangle = new FilledRectangle( balanceBox );
+    QskTextLabel* balanceLabel = new QskTextLabel( "Balance / Fade", balanceBox );
+    balanceLabel->setAlignment( Qt::AlignLeft );
+    balanceRectangle->setFixedHeight(
+        QFontMetricsF( balanceLabel->effectiveFont( QskTextLabel::Text ) ).height() );
+    balanceBox->addSpacer( 0, 1 );
+    outterLayout->addItem( balanceBox, 0, 1 );
+
+
+    QskGridBox* toneGridBox = new QskGridBox( outterLayout );
+    QskTextLabel* bassLabel = new QskTextLabel( "Bass", toneGridBox );
+    toneGridBox->addItem( bassLabel, 0, 0 );
+    QskTextLabel* trebleLabel = new QskTextLabel( "Treble", toneGridBox );
+    toneGridBox->addItem( trebleLabel, 0, 1 );
+    QskTextLabel* subLabel = new QskTextLabel( "Sub", toneGridBox );
+    toneGridBox->addItem( subLabel, 0, 2 );
+
+    QskTextLabel* bassNumberLabel = new QskTextLabel( "0", toneGridBox );
+    toneGridBox->addItem( bassNumberLabel, 1, 0 );
+    QskTextLabel* trebleNumberLabel = new QskTextLabel( "0", toneGridBox );
+    toneGridBox->addItem( trebleNumberLabel, 1, 1 );
+    QskTextLabel* subNumberLabel = new QskTextLabel( "0", toneGridBox );
+    toneGridBox->addItem( subNumberLabel, 1, 2 );
+
+    QskPushButton* bassPlusButton = new QskPushButton( "+", toneGridBox );
+    bassPlusButton->setFixedSize( 35, 35 );
+    toneGridBox->addItem( bassPlusButton, 2, 0 );
+    toneGridBox->setAlignment( bassPlusButton, Qt::AlignCenter );
+    QskPushButton* treblePlusButton = new QskPushButton( "+", toneGridBox );
+    treblePlusButton->setFixedSize( 35, 35 );
+    toneGridBox->addItem( treblePlusButton, 2, 1 );
+    toneGridBox->setAlignment( treblePlusButton, Qt::AlignCenter );
+    QskPushButton* subPlusButton = new QskPushButton( "+", toneGridBox );
+    subPlusButton->setFixedSize( 35, 35 );
+    toneGridBox->addItem( subPlusButton, 2, 2 );
+    toneGridBox->setAlignment( subPlusButton, Qt::AlignCenter );
+
+    QskSlider* bassSlider = new QskSlider( Qt::Vertical, toneGridBox );
+    bassSlider->setMinimum( 0 );
+    bassSlider->setMaximum( 40 );
+    bassSlider->setValue( 30 );
+    toneGridBox->addItem( bassSlider, 3, 0 );
+    toneGridBox->setAlignment( bassSlider, Qt::AlignCenter );
+    QskSlider* trebleSlider = new QskSlider( Qt::Vertical, toneGridBox );
+    trebleSlider->setMinimum( 0 );
+    trebleSlider->setMaximum( 40 );
+    trebleSlider->setValue( 11 );
+    toneGridBox->addItem( trebleSlider, 3, 1 );
+    toneGridBox->setAlignment( trebleSlider, Qt::AlignCenter );
+    QskSlider* subSlider = new QskSlider( Qt::Vertical, toneGridBox );
+    subSlider->setMinimum( 0 );
+    subSlider->setMaximum( 40 );
+    subSlider->setValue( 18 );
+    toneGridBox->addItem( subSlider, 3, 2 );
+    toneGridBox->setAlignment( subSlider, Qt::AlignCenter );
+
+    QskPushButton* bassMinusButton = new QskPushButton( "-", toneGridBox );
+    bassMinusButton->setFixedSize( 35, 35 );
+    toneGridBox->addItem( bassMinusButton, 4, 0 );
+    toneGridBox->setAlignment( bassMinusButton, Qt::AlignCenter );
+    QskPushButton* trebleMinusButton = new QskPushButton( "-", toneGridBox );
+    trebleMinusButton->setFixedSize( 35, 35 );
+    toneGridBox->addItem( trebleMinusButton, 4, 1 );
+    toneGridBox->setAlignment( trebleMinusButton, Qt::AlignCenter );
+    QskPushButton* subMinusButton = new QskPushButton( "-", toneGridBox );
+    subMinusButton->setFixedSize( 35, 35 );
+    toneGridBox->addItem( subMinusButton, 4, 2 );
+    toneGridBox->setAlignment( subMinusButton, Qt::AlignCenter );
+
+    connect( bassPlusButton, &QskPushButton::pressed, [ bassSlider ]() {
+        bassSlider->setValue( bassSlider->value() + 1 );
+    } );
+    connect( treblePlusButton, &QskPushButton::pressed, [ trebleSlider ]() {
+        trebleSlider->setValue( trebleSlider->value() + 1 );
+    } );
+    connect( subPlusButton, &QskPushButton::pressed, [ subSlider ]() {
+        subSlider->setValue( subSlider->value() + 1 );
+    } );
+    connect( bassMinusButton, &QskPushButton::pressed, [ bassSlider ]() {
+        bassSlider->setValue( bassSlider->value() - 1 );
+    } );
+    connect( trebleMinusButton, &QskPushButton::pressed, [ trebleSlider ]() {
+        trebleSlider->setValue( trebleSlider->value() - 1 );
+    } );
+    connect( subMinusButton, &QskPushButton::pressed, [ subSlider ]() {
+        subSlider->setValue( subSlider->value() - 1 );
+    } );
+
+    outterLayout->addItem( toneGridBox, 1, 0 );
+
+
+    QskGridBox* carGridBox = new QskGridBox( outterLayout );
+    carGridBox->setAutoLayoutChildren( true );
+
+    QskPushButton* upButton = new QskPushButton( carGridBox );
+    upButton->setFixedSize( 100, 50 );
+    QImage upImage( ":/images/up.svg" );
+    QskGraphic upGraphic = QskGraphic::fromImage( upImage );
+    upButton->setGraphic( upGraphic ); // ### try with setGraphicSource
+    carGridBox->addItem( upButton, 0, 0, 1, 3 );
+    carGridBox->setAlignment( upButton, Qt::AlignCenter );
+
+    QskPushButton* leftButton = new QskPushButton( carGridBox );
+    leftButton->setFixedSize( 50, 100 );
+    QImage leftImage( ":/images/left.svg" );
+    QskGraphic leftGraphic = QskGraphic::fromImage( leftImage );
+    leftButton->setGraphic( leftGraphic );
+    carGridBox->addItem( leftButton, 1, 0 );
+
+    StackedControl* carControl = new StackedControl( carGridBox );
+    carControl->setSizePolicy( QskSizePolicy::Expanding, QskSizePolicy::Expanding );
+    carControl->setPolishOnResize( true );
+    carControl->setMargins( 10 );
+    FilledRectangle* horizontalCarRectangle = new FilledRectangle( carControl );
+    horizontalCarRectangle->setObjectName( "horizontalBar" );
+    FilledRectangle* verticalCarRectangle = new FilledRectangle( carControl );
+    verticalCarRectangle->setObjectName( "verticalBar" );
+    BalanceFadeBox *box = new BalanceFadeBox( carControl );
+    box->setObjectName( "box" );
+    QImage carImage( ":/images/car.svg" );
+    QskGraphic graphic = QskGraphic::fromImage( carImage );
+    QskGraphicLabel* carLabel = new QskGraphicLabel( carControl );
+    carLabel->setGraphic( graphic );
+    carGridBox->addItem( carControl, 1, 1 );
+
+    QskPushButton* rightButton = new QskPushButton( carGridBox );
+    rightButton->setFixedSize( 50, 100 );
+    QImage rightImage( ":/images/right.svg" );
+    QskGraphic rightGraphic = QskGraphic::fromImage( rightImage );
+    rightButton->setGraphic( rightGraphic );
+    carGridBox->addItem( rightButton, 1, 2 );
+    carGridBox->setAlignment( rightButton, Qt::AlignRight );
+
+    QskPushButton* downButton = new QskPushButton( carGridBox );
+    downButton->setFixedSize( 100, 50 );
+    QImage downImage( ":/images/down.svg" );
+    QskGraphic downGraphic = QskGraphic::fromImage( downImage );
+    downButton->setGraphic( downGraphic );
+    carGridBox->addItem( downButton, 2, 0, 1, 3 );
+    carGridBox->setAlignment( downButton, Qt::AlignCenter );
+
+    connect( upButton, &QskPushButton::pressed, [ carControl ]() {
+        carControl->setOffset( QPointF( carControl->offset().x(),
+                                        carControl->offset().y() - 5.0 ) );
+        carControl->polish();
+    } );
+    connect( leftButton, &QskPushButton::pressed, [ carControl ]() {
+        carControl->setOffset( QPointF( carControl->offset().x() - 5.0,
+                                        carControl->offset().y() ) );
+        carControl->polish();
+    } );
+    connect( rightButton, &QskPushButton::pressed, [ carControl ]() {
+        carControl->setOffset( QPointF( carControl->offset().x() + 5.0,
+                                        carControl->offset().y() ) );
+        carControl->polish();
+    } );
+    connect( downButton, &QskPushButton::pressed, [ carControl ]() {
+        carControl->setOffset( QPointF( carControl->offset().x(),
+                                        carControl->offset().y() + 5.0 ) );
+        carControl->polish();
+    } );
+
+    outterLayout->addItem( carGridBox, 1, 1 );
+}
diff --git a/examples/hmi-demo/SoundControl.h b/examples/hmi-demo/SoundControl.h
new file mode 100644
index 00000000..2ac431a7
--- /dev/null
+++ b/examples/hmi-demo/SoundControl.h
@@ -0,0 +1,44 @@
+#ifndef SOUNDCONTROL_H
+#define SOUNDCONTROL_H
+
+#include <QskBox.h>
+#include <QskControl.h>
+#include <QskPushButton.h>
+
+class QskGridBox;
+
+class FilledRectangle : public QskPushButton // ### move to some main control file
+{
+public:
+    QSK_SUBCONTROLS( Panel )
+
+    FilledRectangle( QQuickItem* parent ) : QskPushButton( parent )
+    {
+        setFlat( true );
+        setFixedWidth( 80 ); // ### style
+    }
+
+    virtual QskAspect::Subcontrol effectiveSubcontrol(
+        QskAspect::Subcontrol subControl ) const override final;
+};
+
+class BalanceFadeBox : public QskPushButton
+{
+public:
+    QSK_SUBCONTROLS( Panel )
+
+    BalanceFadeBox( QQuickItem* parent ) : QskPushButton( parent )
+    {
+    }
+
+    virtual QskAspect::Subcontrol effectiveSubcontrol(
+        QskAspect::Subcontrol subControl ) const override final;
+};
+
+class SoundControl : public QskControl
+{
+public:
+    SoundControl( QQuickItem *parent = nullptr );
+};
+
+#endif // SOUNDCONTROL_H
diff --git a/examples/hmi-demo/hmi-demo.pro b/examples/hmi-demo/hmi-demo.pro
new file mode 100644
index 00000000..894828a7
--- /dev/null
+++ b/examples/hmi-demo/hmi-demo.pro
@@ -0,0 +1,20 @@
+include( $${PWD}/../examples.pri )
+
+TARGET = hmi-demo
+
+RESOURCES = images.qrc
+
+HEADERS += \
+    MainWindow.h \
+    RadioControl.h \
+    SoundControl.h \
+    DefaultSkin.h \
+    OtherSkin.h
+
+SOURCES += \
+    main.cpp \
+    MainWindow.cpp \
+    RadioControl.cpp \
+    SoundControl.cpp \
+    DefaultSkin.cpp \
+    OtherSkin.cpp
diff --git a/examples/hmi-demo/images.qrc b/examples/hmi-demo/images.qrc
new file mode 100644
index 00000000..4b72d97e
--- /dev/null
+++ b/examples/hmi-demo/images.qrc
@@ -0,0 +1,22 @@
+<!DOCTYPE RCC>
+<RCC version="1.0">
+    <qresource>
+        <file>images/background.jpg</file>
+        <file>images/car.svg</file>
+        <file>images/down.svg</file>
+        <file>images/ic_airplanemode_active_white_18dp_2x.png</file>
+        <file>images/ic_build_white_24dp_2x.png</file>
+        <file>images/ic_extension_white_48dp_2x.png</file>
+        <file>images/ic_face_white_48px.svg</file>
+        <file>images/ic_fast_forward_white_18dp_2x.png</file>
+        <file>images/ic_fast_rewind_white_18dp_2x.png</file>
+        <file>images/ic_pan_tool_white_48dp_2x.png</file>
+        <file>images/ic_skip_next_white_18dp_1x.png</file>
+        <file>images/ic_skip_previous_white_18dp_2x.png</file>
+        <file>images/ic_star_rate_white_18dp_2x.png</file>
+        <file>images/left.svg</file>
+        <file>images/right.svg</file>
+        <file>images/up.svg</file>
+    </qresource>
+</RCC>
+
diff --git a/examples/hmi-demo/images/background-original.jpg b/examples/hmi-demo/images/background-original.jpg
new file mode 100644
index 00000000..80014c73
Binary files /dev/null and b/examples/hmi-demo/images/background-original.jpg differ
diff --git a/examples/hmi-demo/images/background.jpg b/examples/hmi-demo/images/background.jpg
new file mode 100644
index 00000000..3ce90504
Binary files /dev/null and b/examples/hmi-demo/images/background.jpg differ
diff --git a/examples/hmi-demo/images/car.svg b/examples/hmi-demo/images/car.svg
new file mode 100644
index 00000000..4beb2aab
--- /dev/null
+++ b/examples/hmi-demo/images/car.svg
@@ -0,0 +1,410 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg2"
+   viewBox="0 0 960 476"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="blank.svg"
+   inkscape:export-filename="./blank.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="960"
+     inkscape:window-height="1061"
+     id="namedview62"
+     showgrid="false"
+     inkscape:zoom="0.43541667"
+     inkscape:cx="452.1655"
+     inkscape:cy="224.59592"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2" />
+  <title
+     id="title3968">Red Car - Top View</title>
+  <defs
+     id="defs4">
+    <linearGradient
+       id="linearGradient3759">
+      <stop
+         id="stop3761"
+         style="stop-color:#1a1a1a"
+         offset="0" />
+      <stop
+         id="stop3763"
+         style="stop-color:#000000;stop-opacity:0"
+         offset="1" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient4149"
+       y2="834.68"
+       xlink:href="#linearGradient3759"
+       gradientUnits="userSpaceOnUse"
+       x2="848.16"
+       gradientTransform="translate(8.3085 -2.6518)"
+       y1="842.3"
+       x1="871.33" />
+    <linearGradient
+       id="linearGradient4153"
+       y2="533.5"
+       xlink:href="#linearGradient3759"
+       gradientUnits="userSpaceOnUse"
+       x2="812.14"
+       gradientTransform="matrix(.89332 0 0 .89332 80.349 365.15)"
+       y1="537.5"
+       x1="879.9" />
+    <linearGradient
+       id="linearGradient4155"
+       y2="531.91"
+       xlink:href="#linearGradient3759"
+       gradientUnits="userSpaceOnUse"
+       x2="815.82"
+       gradientTransform="translate(27.625 296.49)"
+       y1="537.5"
+       x1="879.9" />
+    <linearGradient
+       id="linearGradient4185"
+       y2="834.68"
+       xlink:href="#linearGradient3759"
+       gradientUnits="userSpaceOnUse"
+       x2="848.16"
+       gradientTransform="matrix(1 0 0 -1 8.3085 1452)"
+       y1="842.3"
+       x1="871.33" />
+    <linearGradient
+       id="linearGradient4187"
+       y2="528.42"
+       xlink:href="#linearGradient3759"
+       gradientUnits="userSpaceOnUse"
+       x2="876.14"
+       gradientTransform="matrix(1 0 0 -1 21.438 1151.5)"
+       y1="528.36"
+       x1="887.9" />
+    <linearGradient
+       id="linearGradient4189"
+       y2="531.91"
+       xlink:href="#linearGradient3759"
+       gradientUnits="userSpaceOnUse"
+       x2="815.82"
+       gradientTransform="matrix(1 0 0 -1 27.625 1152.9)"
+       y1="537.5"
+       x1="879.9" />
+    <linearGradient
+       id="linearGradient4191"
+       y2="535.37"
+       xlink:href="#linearGradient3759"
+       gradientUnits="userSpaceOnUse"
+       x2="883.76"
+       gradientTransform="matrix(1 0 0 -1 21.438 1151.5)"
+       y1="542.4"
+       x1="897.22" />
+    <linearGradient
+       id="linearGradient4193"
+       y2="501.08"
+       xlink:href="#linearGradient3759"
+       gradientUnits="userSpaceOnUse"
+       x2="835.99"
+       gradientTransform="matrix(1 0 0 -1 21.438 1151.5)"
+       y1="552.05"
+       x1="880.71" />
+    <linearGradient
+       id="linearGradient4195"
+       y2="529.61"
+       xlink:href="#linearGradient3759"
+       gradientUnits="userSpaceOnUse"
+       x2="805.29"
+       gradientTransform="matrix(.89332 0 0 -.89332 94.156 1087.8)"
+       y1="528.36"
+       x1="887.9" />
+    <linearGradient
+       id="linearGradient4197"
+       y2="533.5"
+       xlink:href="#linearGradient3759"
+       gradientUnits="userSpaceOnUse"
+       x2="812.14"
+       gradientTransform="matrix(.89332 0 0 -.89332 80.349 1084.2)"
+       y1="537.5"
+       x1="879.9" />
+    <linearGradient
+       id="linearGradient4199"
+       y2="867.68"
+       xlink:href="#linearGradient3759"
+       gradientUnits="userSpaceOnUse"
+       x2="205.59"
+       gradientTransform="matrix(.99043 -.13799 -.13799 -.99043 146.05 1483.3)"
+       y1="873.14"
+       x1="229.7" />
+    <linearGradient
+       id="linearGradient4201"
+       y2="872.65"
+       xlink:href="#linearGradient3759"
+       gradientUnits="userSpaceOnUse"
+       x2="216.56"
+       gradientTransform="matrix(.99043 -.13799 -.13799 -.99043 156.31 1482)"
+       y1="873.06"
+       x1="238.83" />
+    <linearGradient
+       id="linearGradient4203"
+       y2="528.42"
+       xlink:href="#linearGradient3759"
+       gradientUnits="userSpaceOnUse"
+       x2="876.14"
+       gradientTransform="translate(21.438 297.91)"
+       y1="528.36"
+       x1="887.9" />
+    <linearGradient
+       id="linearGradient4205"
+       y2="535.37"
+       xlink:href="#linearGradient3759"
+       gradientUnits="userSpaceOnUse"
+       x2="883.76"
+       gradientTransform="translate(21.438 297.91)"
+       y1="542.4"
+       x1="897.22" />
+    <linearGradient
+       id="linearGradient4207"
+       y2="501.08"
+       xlink:href="#linearGradient3759"
+       gradientUnits="userSpaceOnUse"
+       x2="835.99"
+       gradientTransform="translate(21.438 297.91)"
+       y1="552.05"
+       x1="880.71" />
+    <linearGradient
+       id="linearGradient4209"
+       y2="529.61"
+       xlink:href="#linearGradient3759"
+       gradientUnits="userSpaceOnUse"
+       x2="805.29"
+       gradientTransform="matrix(.89332 0 0 .89332 94.156 361.57)"
+       y1="528.36"
+       x1="887.9" />
+    <linearGradient
+       id="linearGradient4211"
+       y2="867.68"
+       xlink:href="#linearGradient3759"
+       gradientUnits="userSpaceOnUse"
+       x2="205.59"
+       gradientTransform="matrix(.99043 .13799 -.13799 .99043 146.05 -33.885)"
+       y1="873.14"
+       x1="229.7" />
+    <linearGradient
+       id="linearGradient4213"
+       y2="872.65"
+       xlink:href="#linearGradient3759"
+       gradientUnits="userSpaceOnUse"
+       x2="216.56"
+       gradientTransform="matrix(.99043 .13799 -.13799 .99043 156.31 -32.603)"
+       y1="873.06"
+       x1="238.83" />
+  </defs>
+  <g
+     id="layer1"
+     transform="translate(-52.937 -486.69)">
+    <g
+       id="g3890">
+      <path
+         id="path3855"
+         style="fill-opacity:.99608;stroke:#191919;stroke-width:14;fill:#000000"
+         d="m610.52 493.69c-1.5086 0.009-4.7211 0.30491-6.4687 0.9375l-3.5 1.5 8.6562 35.938-124.81 0.28125c-2.4363 0.005-4.8876-0.014-7.3437-0.0312-4.912-0.0343-9.8649-0.10455-14.844-0.21875-7.2926-0.16728-14.669-0.41288-22.062-0.71875-0.39591-0.0164-0.79137-0.0457-1.1875-0.0625-14.932-0.63018-30.007-1.4917-45.031-2.4375-20.326-1.2827-40.52-2.7074-60.124-3.875-14.528-0.8653-28.732-1.5796-42.375-2-9.3692-0.28873-18.464-0.45655-27.25-0.40625-4.3158 0.0247-8.5678 0.0933-12.719 0.21875-4.1508 0.12546-8.3801 0.3553-12.656 0.65625-2.138 0.15047-4.2778 0.31024-6.4374 0.5-6.4689 0.5684-13.045 1.3214-19.594 2.1875-0.0101 0.001-0.0211-0.001-0.0312 0-4.3725 0.57858-8.7185 1.2255-13.062 1.9062-4.3439 0.68073-8.6734 1.3978-12.937 2.1562-4.2537 0.75662-8.4704 1.5654-12.594 2.375-0.01 0.002-0.0212-0.002-0.0312 0-2.0664 0.40586-4.0697 0.80417-6.0937 1.2188-6.0614 1.2416-11.934 2.516-17.5 3.7812-0.0101 0.002-0.0211-0.002-0.0312 0-3.7165 0.8449-7.2872 1.6752-10.719 2.5-6.8638 1.6484-13.115 3.2346-18.531 4.6562-8.1236 2.1325-14.382 3.9272-18.094 5-2.4736 0.71578-3.8125 1.125-3.8125 1.125l-13.687 3.75c-0.9024 0.24873-1.7781 0.6929-2.625 1.3125-0.28771 0.2105-0.56234 0.43593-0.84374 0.6875-1.0996 0.9796-2.151 2.2707-3.1562 3.8438-0.0046 0.007 0.0046 0.0243 0 0.0312-0.50036 0.78473-1.0225 1.6405-1.5 2.5625-0.0042 0.008 0.0042 0.0232 0 0.0312-0.47757 0.9237-0.95114 1.9142-1.4062 2.9688-0.0037 0.009 0.0037 0.0222 0 0.0312-3.667 8.5095-6.62 21.131-8.9374 36.219-0.0015 0.01 0.0015 0.0212 0 0.0312-0.03595 0.23416-0.0581 0.48342-0.09375 0.71875-0.50462 3.3315-0.99204 6.7982-1.4375 10.344-0.03048 0.24265-0.06355 0.47519-0.09375 0.71875-0.50157 4.0432-0.94672 8.2025-1.375 12.469-0.001 0.01 0.000999 0.0211 0 0.0312-0.21354 2.1284-0.42912 4.2948-0.62499 6.4688-0.000921 0.01 0.000921 0.0209 0 0.0312-0.19581 2.1743-0.38397 4.3492-0.56249 6.5625-0.000826 0.01 0.000825 0.0209 0 0.0312-0.35775 4.4376-0.67817 8.9458-0.96874 13.5-0.000656 0.0101 0.000655 0.0209 0 0.0312-0.8726 13.684-1.4596 27.789-1.7812 41.562-0.000245 0.0104 0.000244 0.0207 0 0.0312-0.21443 9.1894-0.3126 18.213-0.3126 26.907 0 0.96763 0.02755 1.9629 0.03125 2.9375-0.0037 0.97462-0.03125 1.9699-0.03125 2.9375 0 8.6932 0.09816 17.717 0.3125 26.906 0.000244 0.0105-0.000245 0.0208 0 0.0312 0.32165 13.774 0.90864 27.878 1.7812 41.562 0.000655 0.0103-0.000656 0.0211 0 0.0312 0.29057 4.5542 0.61099 9.0624 0.96874 13.5 0.000825 0.0103-0.000826 0.0211 0 0.0312 0.17852 2.2133 0.36668 4.3882 0.56249 6.5625 0.000921 0.0103-0.000921 0.0211 0 0.0312 0.19588 2.174 0.41145 4.3404 0.62499 6.4688 0.000999 0.0102-0.001 0.0211 0 0.0312 0.42826 4.2663 0.87342 8.4256 1.375 12.469 0.0302 0.24356 0.06327 0.4761 0.09375 0.71875 0.44545 3.5456 0.93287 7.0123 1.4375 10.344 0.03565 0.23533 0.0578 0.48459 0.09375 0.71875 0.0015 0.01-0.0015 0.0215 0 0.0312 2.3174 15.087 5.2704 27.709 8.9374 36.219 0.0037 0.009-0.0037 0.0226 0 0.0312 0.45509 1.0546 0.92866 2.045 1.4062 2.9688 0.0042 0.008-0.0042 0.0231 0 0.0312 0.47753 0.92204 0.99962 1.7778 1.5 2.5625 0.0046 0.007-0.0046 0.0242 0 0.0312 1.0052 1.5731 2.0566 2.8642 3.1562 3.8438 0.2814 0.25157 0.55603 0.477 0.84374 0.6875 0.84686 0.6196 1.7226 1.0638 2.625 1.3125l13.687 3.75s1.3388 0.40922 3.8125 1.125c3.7111 1.0728 9.97 2.8675 18.094 5 5.4157 1.4217 11.667 3.0078 18.531 4.6562 3.4314 0.82484 7.0022 1.6551 10.719 2.5 0.0102 0.002 0.0211-0.002 0.0312 0 5.5661 1.2652 11.438 2.5396 17.5 3.7812 2.024 0.41458 4.0273 0.81289 6.0937 1.2188 0.0101 0.002 0.0212-0.002 0.0312 0 4.1232 0.80965 8.3399 1.6184 12.594 2.375 4.264 0.75843 8.5935 1.4755 12.937 2.1562 4.3439 0.68073 8.6898 1.3277 13.062 1.9062 0.0102 0.001 0.0211-0.001 0.0312 0 6.5486 0.86611 13.125 1.6191 19.594 2.1875 2.1597 0.18976 4.2994 0.34953 6.4374 0.5 4.276 0.30095 8.5053 0.53079 12.656 0.65625 4.1508 0.12546 8.4028 0.19403 12.719 0.21875 8.7859 0.0503 17.881-0.11752 27.25-0.40625 13.642-0.42043 27.847-1.1347 42.375-2 19.604-1.1676 39.798-2.5923 60.124-3.875 15.024-0.94578 30.098-1.8073 45.031-2.4375 0.39612-0.0168 0.79158-0.0461 1.1875-0.0625 7.3934-0.30587 14.77-0.55147 22.062-0.71875 4.9787-0.1142 9.9316-0.18447 14.844-0.21875 2.456-0.0172 4.9073-0.0365 7.3437-0.0312l124.81 0.28125-8.6562 35.938 3.5 1.5c1.7476 0.63259 4.9601 0.92851 6.4687 0.9375 0.8486 0.005 1.7551-0.0741 2.6875-0.25 0.31069-0.0585 0.62352-0.14105 0.93749-0.21875 0.30459-0.0756 0.63258-0.15668 0.93749-0.25 0.62844-0.19306 1.2635-0.42156 1.875-0.6875 1.8215-0.79351 3.5342-1.9314 4.7812-3.3125 0.01-0.0107 0.0217-0.0206 0.0312-0.0312 0.6248-0.6979 1.1123-1.4512 1.4687-2.2812l12.156-31.312 109.94 0.25c0.7469 0.3739 1.4761 0.74511 2.2187 1.0938 2.9792 1.3995 5.911 2.597 8.8436 3.625 1.4623 0.51259 2.9178 0.97549 4.375 1.4062 5.1 1.5075 10.188 2.5515 15.344 3.25 2.9462 0.39932 5.9259 0.69388 8.9374 0.90625 1.5057 0.1061 3.034 0.18011 4.5624 0.25 3.057 0.13994 6.1386 0.21283 9.3124 0.25 6.3475 0.0741 12.979 0 20 0 10.41 0 20.322-0.53122 29.781-1.5625 3.7835-0.41251 7.4911-0.89749 11.125-1.4688 7.2676-1.1425 14.228-2.6189 20.906-4.375 1.6694-0.43903 3.3357-0.89874 4.9687-1.375 4.899-1.4288 9.6128-3.0254 14.187-4.7812 1.5248-0.58527 3.042-1.1605 4.5312-1.7812 2.9783-1.2414 5.882-2.557 8.7186-3.9375 1.4183-0.69027 2.8355-1.4006 4.2187-2.125 2.7664-1.4488 5.4668-2.98 8.0937-4.5625 1.3135-0.79125 2.5961-1.6135 3.875-2.4375 6.3943-4.1201 12.363-8.6255 17.906-13.531 4.4286-3.9195 8.6015-8.0798 12.5-12.469 0.005-0.006-0.005-0.0254 0-0.0312 0.97044-1.0929 1.937-2.1916 2.875-3.3125 0.005-0.006-0.005-0.0251 0-0.0312 0.93773-1.1209 1.8757-2.2578 2.7812-3.4062 0.005-0.006-0.005-0.0249 0-0.0312 2.7256-3.4582 5.3132-7.0189 7.7499-10.719 0.005-0.007-0.005-0.024 0-0.0312 0.80882-1.2286 1.6289-2.4644 2.4062-3.7188 0.005-0.008-0.005-0.0238 0-0.0312 2.3405-3.7781 4.5668-7.6525 6.6249-11.656 0.004-0.008-0.004-0.0231 0-0.0312 0.68299-1.3292 1.3477-2.6781 2-4.0312 0.004-0.008-0.004-0.0229 0-0.0312 0.65204-1.3533 1.316-2.7169 1.9375-4.0938 0.004-0.009-0.004-0.0227 0-0.0312 1.2464-2.7625 2.438-5.5517 3.5625-8.4062 0.004-0.009-0.004-0.0224 0-0.0312 0.56023-1.4229 1.0948-2.8674 1.625-4.3125 0.003-0.009-0.003-0.0222 0-0.0312 0.53002-1.4452 1.0623-2.908 1.5625-4.375 0.49999-1.4671 0.99842-2.949 1.4687-4.4375 0.003-0.009-0.003-0.022 0-0.0312 0.47013-1.4886 0.93435-2.9905 1.375-4.5 0.003-0.01-0.003-0.0217 0-0.0312 0.44045-1.5096 0.87009-3.0324 1.2812-4.5625 0.003-0.01-0.003-0.0217 0-0.0312 1.2381-4.6101 2.3684-9.306 3.3437-14.094v-0.0312c0.3236-1.5894 0.6112-3.2044 0.9063-4.8125v-0.0312c2.0747-11.318 3.4621-23.062 4.1562-35.219 0.0005-0.0103-0.0006-0.0211 0-0.0312 0.098-1.7279 0.1787-3.4757 0.25-5.2188 0.0004-0.0103-0.0004-0.0211 0-0.0312 0.1426-3.4969 0.2467-7.0072 0.2812-10.562 0-0.0103-0.0001-0.0211 0-0.0312 0.017-1.783 0.01-3.578 0-5.375 0-0.6358-0.022-1.2714-0.031-1.9062 0.01-0.63485 0.031-1.2704 0.031-1.9062 0.01-1.797 0.017-3.592 0-5.375-0.0001-0.0102 0-0.0209 0-0.0312-0.034-3.5553-0.1386-7.0656-0.2812-10.562-0.0004-0.0102 0.0004-0.0209 0-0.0312-0.071-1.7431-0.152-3.4908-0.25-5.2188-0.0006-0.0102 0.0005-0.0209 0-0.0312-0.6941-12.157-2.0815-23.9-4.1562-35.219v-0.0312c-0.2951-1.6081-0.5827-3.2231-0.9063-4.8125v-0.0312c-0.97537-4.7878-2.1056-9.4836-3.3437-14.094-0.003-0.01 0.003-0.0213 0-0.0312-0.41115-1.5301-0.84079-3.0529-1.2812-4.5625-0.003-0.01 0.003-0.0213 0-0.0312-0.44063-1.5095-0.90485-3.0114-1.375-4.5-0.003-0.009 0.003-0.0223 0-0.0312-0.47032-1.4885-0.96875-2.9704-1.4687-4.4375-0.50017-1.467-1.0325-2.9298-1.5625-4.375-0.003-0.009 0.003-0.0223 0-0.0312-0.53021-1.4451-1.0648-2.8896-1.625-4.3125-0.004-0.009 0.004-0.0223 0-0.0312-1.1244-2.8546-2.3161-5.6438-3.5625-8.4062-0.004-0.008 0.004-0.0223 0-0.0312-0.62148-1.3768-1.2854-2.7405-1.9375-4.0938-0.004-0.008 0.004-0.0233 0-0.0312-0.65224-1.3532-1.317-2.7021-2-4.0312-0.004-0.008 0.004-0.0233 0-0.0312-2.0582-4.0038-4.2844-7.8782-6.6249-11.656-0.005-0.007 0.005-0.0233 0-0.0312-0.77733-1.2543-1.5974-2.4902-2.4062-3.7188-0.005-0.007 0.005-0.0242 0-0.0312-2.4367-3.6999-5.0243-7.2606-7.7499-10.719-0.005-0.006 0.005-0.0253 0-0.0312-0.90549-1.1485-1.8435-2.2853-2.7812-3.4062-0.005-0.006 0.005-0.0253 0-0.0312-0.93801-1.1209-1.9045-2.2196-2.875-3.3125-0.005-0.006 0.005-0.0253 0-0.0312-3.8983-4.3889-8.0712-8.5493-12.5-12.469-5.543-4.9058-11.512-9.4112-17.906-13.531-1.2789-0.82402-2.5615-1.6462-3.875-2.4375-2.6269-1.5825-5.3273-3.1137-8.0937-4.5625-1.3832-0.72439-2.8004-1.4347-4.2187-2.125-2.8367-1.3806-5.7403-2.6961-8.7186-3.9375-1.4892-0.62071-3.0064-1.196-4.5312-1.7812-4.5746-1.7558-9.2883-3.3525-14.187-4.7812-1.633-0.47626-3.2993-0.93597-4.9687-1.375-6.6777-1.7561-13.638-3.2325-20.906-4.375-3.6338-0.57126-7.3414-1.0562-11.125-1.4688-9.4586-1.0326-19.371-1.5638-29.781-1.5638-7.0204 0-13.652-0.0741-20 0-3.1738 0.0372-6.2554 0.11006-9.3124 0.25-1.5285 0.0699-3.0568 0.1439-4.5624 0.25-3.0115 0.21237-5.9912 0.50693-8.9374 0.90625-5.1556 0.69849-10.244 1.7425-15.344 3.25-1.4572 0.43076-2.9127 0.89366-4.375 1.4062-2.9327 1.028-5.8645 2.2255-8.8436 3.625-0.74267 0.34864-1.4718 0.71985-2.2187 1.0938l-109.94 0.25-12.156-31.312c-0.35644-0.83-0.84393-1.5834-1.4687-2.2812-0.01-0.0105-0.0213-0.0206-0.0312-0.0312-1.247-1.3811-2.9597-2.519-4.7812-3.3125-0.61146-0.26594-1.2465-0.49444-1.875-0.6875-0.30491-0.0933-0.6329-0.1744-0.93749-0.25-0.31402-0.0777-0.62685-0.16025-0.93754-0.21875-0.9324-0.1759-1.8389-0.255-2.6875-0.25z" />
+      <path
+         id="path2853"
+         style="fill-opacity:0.99607998;fill:#ffffff"
+         d="m610.52 493.69c-1.5086 0.009-4.7211 0.30611-6.4687 0.9375l-3.5 1.5 8.6562 35.844-124.81 0.28125c-77.963 0.1654-166.52-11.504-232.93-9.5-66.412 2.0037-152.12 28-152.12 28l-13.687 3.7812c-19.251 5.2963-25.718 97.367-25.718 166.78 0 1.113 0.02665 2.2531 0.03125 3.375-0.0046 1.1219-0.03125 2.262-0.03125 3.375 0 69.414 6.4673 161.48 25.718 166.78l13.687 3.7812s85.711 25.996 152.12 28c66.412 2.0037 154.97-9.6654 232.93-9.5l124.81 0.28125-8.6562 35.844 3.5 1.5c1.7476 0.63139 4.96 0.92854 6.4687 0.9375 0.84859 0.005 1.7551-0.0744 2.6875-0.25 0.3107-0.0584 0.62352-0.14119 0.93749-0.21875 0.30459-0.0754 0.63259-0.15686 0.93749-0.25 0.62844-0.19269 1.2635-0.42206 1.875-0.6875 1.8215-0.79201 3.5342-1.9028 4.7812-3.2812 0.01-0.0107 0.0217-0.0208 0.0312-0.0312 0.6248-0.69658 1.1123-1.4528 1.4687-2.2812l12.156-31.25 109.94 0.25c23.9 11.942 45.511 10.719 73.593 10.719 133.25 0 187.63-86.586 187-201.38 0-0.7802-0.019-1.5656-0.031-2.3438 0.012-0.77811 0.031-1.5636 0.031-2.3438 0.6282-114.79-53.749-201.38-187-201.38-28.082 0-49.693-1.2236-73.593 10.719l-109.94 0.25-12.156-31.25c-0.35645-0.82844-0.84393-1.5847-1.4687-2.2812-0.01-0.0104-0.0213-0.0206-0.0312-0.0312-1.247-1.3785-2.9597-2.4892-4.7812-3.2812-0.61148-0.26544-1.2465-0.49481-1.875-0.6875-0.3049-0.0931-0.6329-0.1746-0.93749-0.25-0.31397-0.0776-0.62679-0.16035-0.93749-0.21875-0.93239-0.1756-1.8389-0.255-2.6875-0.25z" />
+      <path
+         id="path3643"
+         style="opacity:.9;fill-opacity:.99608;fill:#262626"
+         d="m400.34 855.24c-33.364 0-65.307 1.8-94.811 5.0625 25.66 48.714 97.985 30.265 205.56 31.531 49.686 0.58471 89.543 1.8793 121.53 2.375-47.16-23.334-133.53-38.969-232.28-38.969z" />
+      <path
+         id="path3658"
+         style="opacity:.5;fill-opacity:.99608;fill:#000000"
+         d="m400.34 855.24c-3.2064 0-6.3831 0.0295-9.5624 0.0625 0.81825 16.171 6.4281 30.257 14.594 38.844 4.6714-0.0756 9.4951-0.19655 14.437-0.34375-8.5657-8.1923-14.593-22.228-15.719-38.562-1.2512-0.005-2.4947 0-3.75 0z" />
+      <path
+         id="path3707"
+         style="stroke-width:5;block-progression:tb;text-indent:0;color:#000000;stroke:#191919;text-transform:none;fill:#212121"
+         d="m989.02 827.5-5.0937 0.59375c-21.545 2.5127-37.688 25.979-39.281 54.531l-0.37499 7.125 5.2499-4.8438c15.889-14.68 28.303-32.507 37.406-52.75l2.09-4.65z" />
+      <path
+         id="path3715"
+         style="opacity:.5;stroke-linejoin:round;stroke:#292929;stroke-linecap:round;stroke-width:6;fill:none"
+         d="m783.47 838.5s79.677-22.596 105.38-31.982c26.839-9.8018 98.859-39.146 98.859-39.146s-8.7409 42.47-30.483 57.918c-77.23 54.87-232.69 53.85-232.69 53.85" />
+      <path
+         id="path3757"
+         style="fill:url(#linearGradient4149)"
+         d="m869.97 817.84-4.4374 2.3438c0.98912 1.1568 1.7955 2.4286 2.375 3.8438 4.7979 11.717-10.736 29.236-26.875 35.781-0.51675 0.20958-1.8129 0.84066-3.4062 1.6562l13.625-3.875c17.306-8.4576 27.47-23.082 23-34-0.91615-2.2373-2.3752-4.1661-4.2812-5.75z" />
+      <path
+         id="path3787"
+         style="fill:url(#linearGradient4203)"
+         d="m878.55 813.38-4.4375 2.3438c0.98913 1.1568 1.7955 2.4286 2.375 3.8438 4.7979 11.717-10.736 29.236-26.875 35.781-0.51676 0.20958-1.8129 0.84066-3.4062 1.6562l13.625-3.875c17.306-8.4576 27.47-23.082 23-34-0.91615-2.2373-2.3752-4.1661-4.2812-5.75z" />
+      <path
+         id="path3752"
+         style="fill:url(#linearGradient4155)"
+         d="m884.74 811.96-4.4374 2.3438c0.98913 1.1568 1.7955 2.4286 2.375 3.8438 4.7979 11.717-10.736 29.236-26.875 35.781-0.51675 0.20958-1.8129 0.84066-3.4062 1.6562l13.625-3.875c17.306-8.4576 27.47-23.082 23-34-0.91615-2.2373-2.3752-4.1661-4.2812-5.75z" />
+      <path
+         id="path3735"
+         style="fill:url(#linearGradient4205)"
+         d="m901.65 807.69-6.1874 1.8438c0.96015 1.7128 1.6545 3.5323 2.0312 5.4688 3.1194 16.034-20.962 34.284-43.031 38.5-3.395 0.64864-28.884 8.576-32.158 8.8044v4.125l41.439-12.148c26.285-5.4963 44.949-22.448 41.875-38.25-0.59564-3.0616-1.956-5.8595-3.9687-8.3438z" />
+      <path
+         id="path3783"
+         style="fill:url(#linearGradient4207)"
+         d="m901.65 807.69-6.1874 1.8438c0.96015 1.7128 1.6545 3.5323 2.0312 5.4688 3.1194 16.034-20.962 34.284-43.031 38.5-3.395 0.64864-28.884 8.576-32.158 8.8044v4.125l41.439-12.148c26.285-5.4963 44.949-22.448 41.875-38.25-0.59564-3.0616-1.956-5.8595-3.9687-8.3438z" />
+      <path
+         id="path3799"
+         style="fill:url(#linearGradient4209)"
+         d="m857.12 822.46-3.9641 2.0937c0.88361 1.0334 1.604 2.1696 2.1216 3.4337 4.2861 10.467-9.5906 26.117-24.008 31.964-0.46163 0.18723-1.6195 0.75098-3.0428 1.4796l12.171-3.4616c15.46-7.5554 24.54-20.62 20.546-30.373-0.81842-1.9987-2.1218-3.7216-3.8245-5.1366z" />
+      <path
+         id="path3803"
+         style="fill:url(#linearGradient4153)"
+         d="m843.32 826.03-3.9641 2.0937c0.88361 1.0334 1.604 2.1696 2.1216 3.4337 4.2861 10.467-9.5906 26.117-24.008 31.964-0.46162 0.18723-1.6195 0.75098-3.0428 1.4796l12.171-3.4616c15.46-7.5554 24.54-20.62 20.546-30.373-0.81842-1.9987-2.1218-3.7216-3.8245-5.1366z" />
+      <path
+         id="rect3861"
+         style="fill:url(#linearGradient4211)"
+         d="m233.27 845.72c8.293-2.0234 15.486-1.4788 19.797 5.7872l-2.4934 17.897c-6.8751 6.1732-13.75 4.9509-20.625 0.15543l3.3212-23.839z" />
+      <path
+         id="path3864"
+         style="fill:url(#linearGradient4213)"
+         d="m253.54 848.99c8.1502-1.2102 15.167-0.5728 18.843 5.5081l-2.3731 17.034c-6.4839 2.9748-12.983 5.2096-19.631 0.14793l3.1611-22.69z" />
+      <path
+         id="path4025"
+         style="opacity:.9;block-progression:tb;text-indent:0;color:#000000;text-transform:none;fill:#191919"
+         d="m400.34 852.75c-33.454 0-65.492 1.7894-95.093 5.0625l-3.6562 0.40625 1.7187 3.25c6.6711 12.664 16.562 21.113 29.062 26.438 12.501 5.3241 27.572 7.6126 45.093 8.4375 35.042 1.6498 79.954-2.6312 133.59-2 49.659 0.58438 89.508 1.8787 121.53 2.375l1.125-4.75c-47.84-23.68-134.34-39.22-233.36-39.22zm0 5c91.169 0 171.75 13.479 220.09 33.719-29.952-0.58241-65.212-1.606-109.31-2.125-53.937-0.63473-98.976 3.6522-133.4 2.0312-17.214-0.81046-31.767-3.1054-43.406-8.0625-10.453-4.4521-18.485-11.154-24.5-20.906 28.307-2.9831 58.735-4.6562 90.53-4.6562z" />
+      <path
+         id="rect2864"
+         style="opacity:.9;fill-opacity:.99608;stroke:#191919;stroke-width:5;fill:#262626"
+         d="m260.5 607.38-77.749 12.469c-27.15 4.3542-48.947 48.773-50.999 104.84 2.0523 56.071 23.849 100.49 50.999 104.84l77.749 12.469c13.296 0 24-10.704 24-24v-186.62c0-13.296-10.704-24-24-24z" />
+      <path
+         id="path3703"
+         style="opacity:.9;fill-opacity:.99608;stroke:#191919;stroke-width:5;fill:#262626"
+         d="m691.96 573.16c-2.9692 0-5.8933 0.33215-8.7812 0.96875-0.0104-0.01-0.0208-0.021-0.0312-0.0312l-63.843 12.312c-17.728 6.6047-32 14.272-32 32v212.56c0 17.728 14.272 25.395 32 32l63.843 12.312c0.0105-0.0102 0.0208-0.0211 0.0312-0.0312 2.8879 0.6366 5.812 0.96875 8.7812 0.96875 45.395 0 82.198-57.363 82.312-151.53-0.11408-94.169-36.916-151.53-82.312-151.53z" />
+      <path
+         id="path4157"
+         style="opacity:.9;fill-opacity:.99608;fill:#262626"
+         d="m400.34 594.15c-33.364 0-65.307-1.8-94.811-5.0625 25.66-48.714 97.985-30.265 205.56-31.531 49.686-0.58471 89.543-1.8793 121.53-2.375-47.16 23.334-133.53 38.969-232.28 38.969z" />
+      <path
+         id="path4159"
+         style="opacity:.5;fill-opacity:.99608;fill:#000000"
+         d="m400.34 594.15c-3.2064 0-6.3831-0.0295-9.5624-0.0625 0.81825-16.171 6.4281-30.257 14.594-38.844 4.6714 0.0756 9.4951 0.19655 14.437 0.34375-8.5657 8.1923-14.593 22.228-15.719 38.562-1.2512 0.005-2.4947 0-3.75 0z" />
+      <path
+         id="path4161"
+         style="stroke-width:5;block-progression:tb;text-indent:0;color:#000000;stroke:#191919;text-transform:none;fill:#212121"
+         d="m989.02 621.89-5.0937-0.59375c-21.545-2.5127-37.688-25.979-39.281-54.531l-0.37499-7.125 5.2499 4.8438c15.889 14.68 28.303 32.507 37.406 52.75l2.0937 4.6562z" />
+      <path
+         id="path4163"
+         style="opacity:.5;stroke-linejoin:round;stroke:#292929;stroke-linecap:round;stroke-width:6;fill:none"
+         d="m783.47 610.89s79.677 22.596 105.38 31.982c26.839 9.8018 98.859 39.146 98.859 39.146s-8.7409-42.47-30.483-57.918c-77.23-54.87-232.69-53.86-232.69-53.86" />
+      <path
+         id="path4165"
+         style="fill:url(#linearGradient4185)"
+         d="m869.97 631.55-4.4374-2.3438c0.98912-1.1568 1.7955-2.4286 2.375-3.8438 4.7979-11.717-10.736-29.236-26.875-35.781-0.51675-0.20958-1.8129-0.84066-3.4062-1.6562l13.625 3.875c17.306 8.4576 27.47 23.082 23 34-0.91615 2.2373-2.3752 4.1661-4.2812 5.75z" />
+      <path
+         id="path4167"
+         style="fill:url(#linearGradient4187)"
+         d="m878.55 636.01-4.4375-2.3438c0.98913-1.1568 1.7955-2.4286 2.375-3.8438 4.7979-11.717-10.736-29.236-26.875-35.781-0.51676-0.20958-1.8129-0.84066-3.4062-1.6562l13.625 3.875c17.306 8.4576 27.47 23.082 23 34-0.91615 2.2373-2.3752 4.1661-4.2812 5.75z" />
+      <path
+         id="path4169"
+         style="fill:url(#linearGradient4189)"
+         d="m884.74 637.42-4.4374-2.3438c0.98913-1.1568 1.7955-2.4286 2.375-3.8438 4.7979-11.717-10.736-29.236-26.875-35.781-0.51675-0.20958-1.8129-0.84066-3.4062-1.6562l13.625 3.875c17.306 8.4576 27.47 23.082 23 34-0.91615 2.2373-2.3752 4.1661-4.2812 5.75z" />
+      <path
+         id="path4171"
+         style="fill:url(#linearGradient4191)"
+         d="m901.65 641.7-6.1874-1.8438c0.96015-1.7128 1.6545-3.5323 2.0312-5.4688 3.1194-16.034-20.962-34.284-43.031-38.5-3.395-0.64864-28.884-8.576-32.158-8.8044v-4.125l41.439 12.148c26.285 5.4963 44.949 22.448 41.875 38.25-0.59564 3.0616-1.956 5.8595-3.9687 8.3438z" />
+      <path
+         id="path4173"
+         style="fill:url(#linearGradient4193)"
+         d="m901.65 641.7-6.1874-1.8438c0.96015-1.7128 1.6545-3.5323 2.0312-5.4688 3.1194-16.034-20.962-34.284-43.031-38.5-3.395-0.64864-28.884-8.576-32.158-8.8044v-4.125l41.439 12.148c26.285 5.4963 44.949 22.448 41.875 38.25-0.59564 3.0616-1.956 5.8595-3.9687 8.3438z" />
+      <path
+         id="path4175"
+         style="fill:url(#linearGradient4195)"
+         d="m857.12 626.93-3.9641-2.0937c0.88361-1.0334 1.604-2.1696 2.1216-3.4337 4.2861-10.467-9.5906-26.117-24.008-31.964-0.46163-0.18723-1.6195-0.75098-3.0428-1.4796l12.171 3.4616c15.46 7.5554 24.54 20.62 20.546 30.373-0.81842 1.9987-2.1218 3.7216-3.8245 5.1366z" />
+      <path
+         id="path4177"
+         style="fill:url(#linearGradient4197)"
+         d="m843.32 623.36-3.9641-2.0937c0.88361-1.0334 1.604-2.1696 2.1216-3.4337 4.2861-10.467-9.5906-26.117-24.008-31.964-0.46162-0.18723-1.6195-0.75098-3.0428-1.4796l12.171 3.4616c15.46 7.5554 24.54 20.62 20.546 30.373-0.81842 1.9987-2.1218 3.7216-3.8245 5.1366z" />
+      <path
+         id="path4179"
+         style="fill:url(#linearGradient4199)"
+         d="m233.27 603.66c8.293 2.0234 15.486 1.4788 19.797-5.7872l-2.4934-17.897c-6.8751-6.1732-13.75-4.9509-20.625-0.15543l3.3212 23.839z" />
+      <path
+         id="path4181"
+         style="fill:url(#linearGradient4201)"
+         d="m253.54 600.4c8.1502 1.2102 15.167 0.5728 18.843-5.5081l-2.3731-17.034c-6.4839-2.9748-12.983-5.2096-19.631-0.14793l3.1611 22.69z" />
+      <path
+         id="path4183"
+         style="opacity:.9;block-progression:tb;text-indent:0;color:#000000;text-transform:none;fill:#191919"
+         d="m400.34 596.64c-33.454 0-65.492-1.7894-95.093-5.0625l-3.6562-0.40625 1.7187-3.25c6.6711-12.664 16.562-21.113 29.062-26.438 12.501-5.3241 27.572-7.6126 45.093-8.4375 35.042-1.6498 79.954 2.6312 133.59 2 49.659-0.58438 89.508-1.8787 121.53-2.375l1.125 4.75c-47.849 23.675-134.36 39.219-233.37 39.219zm0-5c91.169 0 171.75-13.479 220.09-33.719-29.952 0.58241-65.212 1.606-109.31 2.125-53.937 0.63473-98.976-3.6522-133.4-2.0312-17.214 0.81046-31.767 3.1054-43.406 8.0625-10.453 4.4521-18.485 11.154-24.5 20.906 28.307 2.9831 58.735 4.6562 90.53 4.6562z" />
+    </g>
+  </g>
+  <metadata
+     id="metadata60">
+    <rdf:RDF>
+      <cc:Work>
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <cc:license
+           rdf:resource="http://creativecommons.org/publicdomain/zero/1.0/" />
+        <dc:publisher>
+          <cc:Agent
+             rdf:about="http://openclipart.org/">
+            <dc:title>Openclipart</dc:title>
+          </cc:Agent>
+        </dc:publisher>
+        <dc:title>Red Car - Top View</dc:title>
+        <dc:date>2010-05-19T15:02:12</dc:date>
+        <dc:description>I was thinking of Trophy ( http://trophy.sourceforge.net/index.php?body=screenshots ) when remixing this one :)</dc:description>
+        <dc:source>https://openclipart.org/detail/61201/red-racing-car-top-view-by-qubodup</dc:source>
+        <dc:creator>
+          <cc:Agent>
+            <dc:title>qubodup</dc:title>
+          </cc:Agent>
+        </dc:creator>
+        <dc:subject>
+          <rdf:Bag>
+            <rdf:li>car</rdf:li>
+            <rdf:li>game</rdf:li>
+            <rdf:li>game sprite</rdf:li>
+            <rdf:li>racing</rdf:li>
+            <rdf:li>racing car</rdf:li>
+            <rdf:li>red</rdf:li>
+            <rdf:li>red car</rdf:li>
+            <rdf:li>simple</rdf:li>
+            <rdf:li>simple car</rdf:li>
+            <rdf:li>sprite</rdf:li>
+            <rdf:li>transport</rdf:li>
+            <rdf:li>transportation</rdf:li>
+            <rdf:li>travel</rdf:li>
+            <rdf:li>video game</rdf:li>
+            <rdf:li>video game art</rdf:li>
+            <rdf:li>video game sprite</rdf:li>
+          </rdf:Bag>
+        </dc:subject>
+      </cc:Work>
+      <cc:License
+         rdf:about="http://creativecommons.org/publicdomain/zero/1.0/">
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Reproduction" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Distribution" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
+      </cc:License>
+    </rdf:RDF>
+  </metadata>
+</svg>
diff --git a/examples/hmi-demo/images/down.svg b/examples/hmi-demo/images/down.svg
new file mode 100644
index 00000000..0acfad0c
--- /dev/null
+++ b/examples/hmi-demo/images/down.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 98.148 98.148" style="enable-background:new 0 0 98.148 98.148;" xml:space="preserve">
+<g>
+	<path d="M0.587,33.457l47.072,47.075c0.75,0.75,2.078,0.75,2.828,0l47.076-47.076c0.375-0.375,0.586-0.884,0.586-1.414   c0-0.53-0.211-1.039-0.586-1.414L84.575,17.641c-0.391-0.391-0.901-0.586-1.414-0.586c-0.512,0-1.022,0.195-1.414,0.586   L49.074,50.314L16.399,17.642c-0.75-0.751-2.078-0.75-2.828,0L0.587,30.629C-0.195,31.41-0.195,32.676,0.587,33.457z" fill="#FFFFFF"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/examples/hmi-demo/images/ic_airplanemode_active_white_18dp_2x.png b/examples/hmi-demo/images/ic_airplanemode_active_white_18dp_2x.png
new file mode 100644
index 00000000..4f8165f1
Binary files /dev/null and b/examples/hmi-demo/images/ic_airplanemode_active_white_18dp_2x.png differ
diff --git a/examples/hmi-demo/images/ic_build_white_24dp_2x.png b/examples/hmi-demo/images/ic_build_white_24dp_2x.png
new file mode 100644
index 00000000..db384dee
Binary files /dev/null and b/examples/hmi-demo/images/ic_build_white_24dp_2x.png differ
diff --git a/examples/hmi-demo/images/ic_extension_white_48dp_2x.png b/examples/hmi-demo/images/ic_extension_white_48dp_2x.png
new file mode 100644
index 00000000..d740716b
Binary files /dev/null and b/examples/hmi-demo/images/ic_extension_white_48dp_2x.png differ
diff --git a/examples/hmi-demo/images/ic_face_white_48px.svg b/examples/hmi-demo/images/ic_face_white_48px.svg
new file mode 100644
index 00000000..50834f60
--- /dev/null
+++ b/examples/hmi-demo/images/ic_face_white_48px.svg
@@ -0,0 +1,4 @@
+<svg fill="#FFFFFF" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z"/>
+    <path d="M0 0h24v24H0z" fill="none"/>
+</svg>
\ No newline at end of file
diff --git a/examples/hmi-demo/images/ic_fast_forward_white_18dp_2x.png b/examples/hmi-demo/images/ic_fast_forward_white_18dp_2x.png
new file mode 100644
index 00000000..cf15f0c7
Binary files /dev/null and b/examples/hmi-demo/images/ic_fast_forward_white_18dp_2x.png differ
diff --git a/examples/hmi-demo/images/ic_fast_rewind_white_18dp_2x.png b/examples/hmi-demo/images/ic_fast_rewind_white_18dp_2x.png
new file mode 100644
index 00000000..3d754e27
Binary files /dev/null and b/examples/hmi-demo/images/ic_fast_rewind_white_18dp_2x.png differ
diff --git a/examples/hmi-demo/images/ic_pan_tool_white_48dp_2x.png b/examples/hmi-demo/images/ic_pan_tool_white_48dp_2x.png
new file mode 100644
index 00000000..e872653d
Binary files /dev/null and b/examples/hmi-demo/images/ic_pan_tool_white_48dp_2x.png differ
diff --git a/examples/hmi-demo/images/ic_skip_next_white_18dp_1x.png b/examples/hmi-demo/images/ic_skip_next_white_18dp_1x.png
new file mode 100644
index 00000000..26434a02
Binary files /dev/null and b/examples/hmi-demo/images/ic_skip_next_white_18dp_1x.png differ
diff --git a/examples/hmi-demo/images/ic_skip_previous_white_18dp_2x.png b/examples/hmi-demo/images/ic_skip_previous_white_18dp_2x.png
new file mode 100644
index 00000000..23faeeb0
Binary files /dev/null and b/examples/hmi-demo/images/ic_skip_previous_white_18dp_2x.png differ
diff --git a/examples/hmi-demo/images/ic_star_rate_white_18dp_2x.png b/examples/hmi-demo/images/ic_star_rate_white_18dp_2x.png
new file mode 100644
index 00000000..a182ef21
Binary files /dev/null and b/examples/hmi-demo/images/ic_star_rate_white_18dp_2x.png differ
diff --git a/examples/hmi-demo/images/left.svg b/examples/hmi-demo/images/left.svg
new file mode 100644
index 00000000..016fdd2c
--- /dev/null
+++ b/examples/hmi-demo/images/left.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 98.148 98.148" style="enable-background:new 0 0 98.148 98.148;" xml:space="preserve">
+<g>
+	<path d="M64.691,0.587L17.617,47.659c-0.75,0.75-0.75,2.078,0,2.828l47.076,47.076c0.375,0.375,0.883,0.586,1.414,0.586   c0.529,0,1.039-0.211,1.414-0.586l12.986-12.987c0.391-0.391,0.586-0.901,0.586-1.414c0-0.512-0.195-1.022-0.586-1.414   L47.834,49.073l32.672-32.674c0.752-0.75,0.75-2.078,0-2.828L67.52,0.587C66.738-0.195,65.473-0.195,64.691,0.587z" fill="#FFFFFF"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/examples/hmi-demo/images/right.svg b/examples/hmi-demo/images/right.svg
new file mode 100644
index 00000000..f88ab81a
--- /dev/null
+++ b/examples/hmi-demo/images/right.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 98.148 98.148" style="enable-background:new 0 0 98.148 98.148;" xml:space="preserve">
+<g>
+	<path d="M33.458,97.562L80.531,50.49c0.75-0.75,0.75-2.078,0-2.828L33.456,0.586C33.081,0.211,32.572,0,32.042,0   c-0.53,0-1.039,0.211-1.414,0.586L17.641,13.573c-0.391,0.391-0.586,0.902-0.586,1.414c0,0.512,0.195,1.023,0.586,1.414   l32.674,32.674L17.642,81.75c-0.751,0.75-0.75,2.078,0,2.828l12.987,12.984C31.411,98.344,32.677,98.344,33.458,97.562z" fill="#FFFFFF"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/examples/hmi-demo/images/up.svg b/examples/hmi-demo/images/up.svg
new file mode 100644
index 00000000..52619ba8
--- /dev/null
+++ b/examples/hmi-demo/images/up.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 98.148 98.149" style="enable-background:new 0 0 98.148 98.149;" xml:space="preserve">
+<g>
+	<path d="M97.562,64.692L50.49,17.618c-0.75-0.75-2.078-0.75-2.828,0L0.586,64.693C0.211,65.068,0,65.577,0,66.106   c0,0.53,0.211,1.039,0.586,1.414l12.987,12.987c0.391,0.391,0.902,0.586,1.414,0.586c0.512,0,1.023-0.195,1.414-0.586   l32.674-32.674L81.75,80.506c0.75,0.751,2.078,0.75,2.828,0l12.984-12.987C98.344,66.739,98.344,65.472,97.562,64.692z" fill="#FFFFFF"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/examples/hmi-demo/main.cpp b/examples/hmi-demo/main.cpp
new file mode 100644
index 00000000..49b997c0
--- /dev/null
+++ b/examples/hmi-demo/main.cpp
@@ -0,0 +1,69 @@
+#include "MainWindow.h"
+#include "DefaultSkin.h"
+#include "OtherSkin.h"
+
+#include <QskShortcut.h>
+#include <QskSkinFactory.h>
+#include <QskSetup.h>
+
+#include <SkinnyShortcut.h>
+
+#include <QGuiApplication>
+
+namespace {
+
+class SkinFactory : public QskSkinFactory
+{
+    Q_OBJECT
+
+public:
+    SkinFactory() : QskSkinFactory()
+    {
+    }
+
+    virtual QStringList skinNames() const override final
+    {
+        return { "DefaultSkin", "OtherSkin" };
+    }
+
+    virtual QskSkin* createSkin( const QString& skinName ) override
+    {
+        if ( skinName == "DefaultSkin" )
+            return new DefaultSkin( skinName );
+
+        if ( skinName == "OtherSkin" )
+            return new OtherSkin( skinName );
+
+        return nullptr;
+    }
+
+public Q_SLOTS:
+    void toggleScheme()
+    {
+        DefaultSkin* skin = static_cast< DefaultSkin* >( qskSetup->skin() );
+        if ( skin )
+            skin->toggleScheme();
+    }
+};
+
+}
+
+int main( int argc, char **argv )
+{
+    QGuiApplication app( argc, argv );
+
+    SkinFactory skinFactory;
+    Qsk::registerSkinFactory( "SampleSkinFactory", &skinFactory );
+    QskSetup::instance()->setSkin( "DefaultSkin" );
+
+    SkinnyShortcut::enable( SkinnyShortcut::DebugBackground | SkinnyShortcut::Quit | SkinnyShortcut::RotateSkin );
+
+    QskShortcut::addShortcut( QKeySequence( Qt::CTRL + Qt::Key_T ), &skinFactory,
+                              SLOT( toggleScheme() ), false );
+
+    MainWindow mainWindow;
+    mainWindow.show();
+    return app.exec();
+}
+
+#include "main.moc"