.Header {
    background-color: #ffffff;
}

.Header-title {
    margin: 0 auto;
    padding: 0 1rem;
}

.Header-title svg {
    height: 46px;
    width: auto;
}

.Header-navToggle svg {
    fill: #000000;
}

[dir="ltr"] .Header-button {
    border-right: #000000;
}

.Browser-tab.is-active a {
    border-bottom-color: #fabb00;
}

a {
    color: #666666;
}

a:hover {
    color: #333333;
}

.Pen-previewLink svg {
    fill: #666666;
}

.Pen-previewLink:hover svg {
    fill: #333333;
}

.penViewportSwitch {
    color: #666666;
    margin-left: 2rem;
}

.penViewportSwitch__icon {
    display: inline-block;
    fill: currentcolor;
    height: 1.2rem;
    margin-left: .6rem;
    opacity: .75;
    stroke: currentcolor;
    stroke-width: 1;
    width: 1.2rem;
}

.penViewportSwitch__icon:hover {
    cursor: pointer;
    opacity: 1;
}

.Preview-wrapper {
    max-width: 100% !important;
    min-width: 320px !important;
}

[dir="ltr"] .Pen-header .Status {
    margin-left: auto;
}