:root {
    --playground-edit-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75z"/></svg>');
    --playground-share-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2m2 14v-3c-3.61 0-6.19 1.43-8 4 .72-3.67 2.94-7.27 8-8V6l5 5z"/></svg>');
    --playground-run-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M20 19V7H4v12zm0-16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-7 14v-2h5v2zm-3.42-4L5.57 9H8.4l3.3 3.3c.39.39.39 1.03 0 1.42L8.42 17H5.59z"/></svg>');
    --playground-cancel-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M20 6.91 17.09 4 12 9.09 6.91 4 4 6.91 9.09 12 4 17.09 6.91 20 12 14.91 17.09 20 20 17.09 14.91 12z"/></svg>')
}

.notebook button:not(.md-clipboard),
.playground button:not(.md-clipboard) {
    position: relative;
    padding: 0 1.5em;
    color: var(--md-typeset-a-color);
    border-radius: .1rem;
    transition: color 125ms
}

.notebook button:not(.md-clipboard)::before,
.playground button:not(.md-clipboard)::before {
    position: absolute;
    left: 0;
    display: block;
    box-sizing: border-box;
    width: 1.25em;
    height: 1.25em;
    background-color: var(--md-typeset-a-color);
    background-size: 1.25em;
    transition: background-color 125ms;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    content: ""
}

.notebook button:not(.md-clipboard)[disabled],
.playground button:not(.md-clipboard)[disabled] {
    color: var(--md-code-hl-comment-color)
}

.notebook button:not(.md-clipboard)[disabled]::before,
.playground button:not(.md-clipboard)[disabled]::before {
    background-color: var(--md-code-hl-comment-color)
}

.notebook button:not(.md-clipboard):hover,
.playground button:not(.md-clipboard):hover {
    color: var(--md-accent-fg-color);
    cursor: pointer
}

.notebook button:not(.md-clipboard):hover::before,
.playground button:not(.md-clipboard):hover::before {
    background-color: var(--md-accent-fg-color)
}

.notebook button:not(.md-clipboard).playground-edit::before,
.playground button:not(.md-clipboard).playground-edit::before {
    -webkit-mask-image: var(--playground-edit-icon);
    mask-image: var(--playground-edit-icon)
}

.notebook button:not(.md-clipboard).playground-share::before,
.playground button:not(.md-clipboard).playground-share::before {
    -webkit-mask-image: var(--playground-share-icon);
    mask-image: var(--playground-share-icon)
}

.notebook button:not(.md-clipboard)#__notebook-submit::before,
.notebook button:not(.md-clipboard).playground-run::before,
.playground button:not(.md-clipboard)#__notebook-submit::before,
.playground button:not(.md-clipboard).playground-run::before {
    -webkit-mask-image: var(--playground-run-icon);
    mask-image: var(--playground-run-icon)
}

.notebook button:not(.md-clipboard)#__notebook-cancel::before,
.notebook button:not(.md-clipboard).playground-cancel::before,
.playground button:not(.md-clipboard)#__notebook-cancel::before,
.playground button:not(.md-clipboard).playground-cancel::before {
    -webkit-mask-image: var(--playground-cancel-icon);
    mask-image: var(--playground-cancel-icon)
}

.notebook button:not(.md-clipboard).hidden,
.playground button:not(.md-clipboard).hidden {
    display: none
}

.md-typeset .source-link {
    position: relative;
    top: -.6rem;
    float: right;
    margin-left: .4rem;
    color: var(--md-default-fg-color--lighter);
    cursor: pointer;
    transition: color 125ms
}

.md-typeset .source-link:hover {
    color: var(--md-accent-fg-color)
}

.md-typeset .source-link .twemoji {
    height: 1.2rem
}

.md-typeset .source-link .twemoji svg {
    width: 1.2rem;
    height: 1.2rem
}

.playground-inputs,
textarea#__notebook-input {
    z-index: 1;
    display: block;
    width: 100%;
    min-height: 3em;
    margin: 0;
    padding: .7720588235em 1.1764705882em;
    overflow: auto;
    color: var(--md-code-fg-color);
    caret-color: var(--md-code-fg-color);
    font-size: .85em;
    font-family: var(--md-code-font-family, _), SFMono-Regular, Consolas, Menlo, monospace;
    font-feature-settings: "kern";
    line-height: 1.4;
    white-space: pre;
    word-wrap: unset;
    background: var(--md-code-bg-color);
    border: none;
    outline: 0;
    cursor: text;
    -webkit-appearance: textarea;
    -moz-appearance: textarea;
    appearance: textarea;
    resize: vertical
}

.playground-inputs::-moz-selection,
textarea#__notebook-input::-moz-selection {
    color: var(--md-code-bg-color);
    background: var(--md-code-fg-color)
}

.playground-inputs::selection,
textarea#__notebook-input::selection {
    color: var(--md-code-bg-color);
    background: var(--md-code-fg-color)
}

.md-typeset textarea {
    scrollbar-color: var(--md-default-fg-color--lighter) transparent;
    scrollbar-width: thin
}

.md-typeset textarea:hover {
    scrollbar-color: var(--md-accent-fg-color) transparent
}

.md-typeset textarea::-webkit-scrollbar {
    width: .2rem;
    height: .2rem
}

.md-typeset textarea::-webkit-scrollbar-corner {
    background-color: transparent
}

.md-typeset textarea::-webkit-scrollbar-thumb {
    background-color: var(--md-default-fg-color--lighter)
}

.md-typeset textarea::-webkit-scrollbar-thumb :hover {
    background-color: var(--md-accent-fg-color)
}

.loading {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .2);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px)
}

.loading .loader {
    position: relative;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin-top: -40px;
    margin-left: -40px;
    border-width: 10px;
    border-style: solid;
    border-top-color: #0ff;
    border-right-color: #ff0;
    border-bottom-color: #0f0;
    border-left-color: #f0f;
    border-radius: 50%;
    animation: spin 2s linear infinite
}

.loading .loader~div {
    position: absolute;
    top: 50%;
    width: 100%;
    margin-top: 40px;
    font-weight: 800;
    font-size: 1rem;
    text-align: center
}

.loading.relative {
    position: absolute
}

.loading.relative .loader {
    width: 2em;
    height: 2em;
    margin-top: -1em;
    margin-left: -1em;
    border-width: .4em
}

.loading.relative .loader~div {
    display: none
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(-360deg)
    }
}

:root {
    --swatch-bar-border-color: hsl(0, 0%, 90%);
    --swatch-border-color: hsl(0, 0%, 85%);
    --swatch-gamut-border-color: hsl(340 82% 52%);
    --swatch-stops: transparent;
    --transparency: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill-opacity=".1" viewBox="0 0 100 100"><path d="M0 0h50v50H0zM50 50h50v50H50z"/></svg>') 0 0/0.5em 0.5em #fefefe
}

:root [data-md-color-scheme=slate] {
    --swatch-border-color: hsla(232, 15%, 25%, 1)
}

:root [data-md-color-scheme=dracula] {
    --swatch-bar-border-color: hsl(231deg 15% 20%);
    --swatch-border-color: hsl(231deg 15% 25%);
    --swatch-gamut-border-color: hsl(326, 100%, 74%);
    --transparency: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill-opacity=".45" viewBox="0 0 100 100"><path d="M0 0h50v50H0zM50 50h50v50H50z"/></svg>') 0 0/0.5em 0.5em #2b2e3b
}

.swatch {
    display: inline-block;
    box-sizing: border-box;
    width: 1.25em;
    height: 1.25em;
    margin-right: .2em;
    margin-left: .25em;
    line-height: 0;
    vertical-align: text-bottom;
    background: var(--transparency);
    border: 2px solid var(--swatch-border-color);
    border-radius: 100px;
    box-shadow: .1em .1em .1em rgba(0, 0, 0, .3);
    transition: all .5s ease
}

.swatch:hover {
    z-index: 2;
    transform: scale(2)
}

.swatch:not(.swatch-gradient):hover {
    cursor: pointer
}

.swatch-color {
    display: inline-block;
    width: 1.025em;
    height: 1.025em;
    margin: 0;
    padding: 0;
    vertical-align: text-bottom;
    background: linear-gradient(to right, var(--swatch-stops));
    border-radius: 100px
}

.swatch-gradient {
    width: 100%;
    height: 3em;
    margin: 0;
    border-radius: 0
}

.swatch-gradient .swatch-color {
    width: 100%;
    height: 2.75em;
    border-radius: 0
}

div.swatch-bar {
    box-sizing: border-box;
    background: var(--transparency);
    background-size: 1em 1em;
    border: 2px solid var(--swatch-bar-border-color)
}

div.swatch-bar .swatch {
    background-position: 0 0, 0 .5em, .5em -.5em, -.5em 0;
    background-size: 1em 1em
}

div.swatch-bar .swatch:not(.out-of-gamut) {
    box-shadow: none
}

div.swatch-bar .swatch:not(.swatch-gradient) {
    width: 3em;
    height: 3em;
    margin: 0;
    border-radius: 0
}

div.swatch-bar .swatch:not(.swatch-gradient) .swatch-color {
    width: 2.75em;
    height: 2.75em;
    margin: 0;
    border-radius: 0
}

div.swatch-bar .swatch:hover {
    transform: scale(1.2) translateY(-.2em)
}

div.swatch-bar .swatch-gradient:hover {
    transform: scale(1.02, 1.2) translateY(-.2em)
}

.swatch.out-of-gamut {
    padding: 1px;
    border: 1px solid var(--swatch-gamut-border-color);
    box-shadow: inset 0 0 0 1px var(--md-code-bg-color)
}

.color-wheel {
    --color-wheel-stops1: transparent;
    --color-wheel-stops2: transparent;
    --color-wheel-stops3: transparent;
    --color-wheel-stops4: transparent;
    --color-wheel-stops5: transparent;
    --color-wheel-bg: var(--md-default-bg-color);
    margin: 1em 0;
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-color: var(--md-default-fg-color--lighter) transparent;
    scrollbar-width: thin
}

.color-wheel::-webkit-scrollbar {
    width: .2rem;
    height: .2rem
}

.color-wheel::-webkit-scrollbar-corner {
    background-color: transparent
}

.color-wheel::-webkit-scrollbar-thumb {
    background-color: var(--md-default-fg-color--lighter)
}

.color-wheel::-webkit-scrollbar-thumb:hover {
    background-color: var(--md-accent-fg-color)
}

.color-wheel:hover {
    scrollbar-color: var(--md-accent-fg-color) transparent
}

.color-wheel div {
    overflow: clip
}

.color-wheel .wheel {
    min-width: -moz-max-content;
    min-width: max-content;
    padding: .3125em;
    border-radius: 1000px
}

.color-wheel .wheel .primary {
    width: 12em;
    height: 10.5em;
    margin: auto;
    -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
    clip-path: polygon(50% 0, 100% 100%, 0 100%)
}

.color-wheel .wheel .primary .primary-inner {
    width: 12em;
    height: 14em;
    background: conic-gradient(var(--color-wheel-stops1));
    transform: rotate(180deg)
}

.color-wheel .wheel .secondary {
    width: 14em;
    height: 14em;
    margin: auto;
    background: var(--color-wheel-bg);
    border-radius: 1000px
}

.color-wheel .wheel .secondary .secondary-inner {
    width: 14em;
    height: 14em;
    margin: auto;
    background: conic-gradient(var(--color-wheel-stops2));
    transform: rotate(-135deg);
    -webkit-clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%)
}

.color-wheel .wheel .tertiary {
    width: 22em;
    height: 22em;
    padding: 4em 0;
    background: conic-gradient(var(--color-wheel-stops3));
    border-radius: 1000px;
    outline: 5px solid var(--color-wheel-bg);
    transform: rotate(135deg)
}

.color-wheel .wheel .tertiary2 {
    width: 30em;
    height: 30em;
    padding: 4em 0;
    background: conic-gradient(var(--color-wheel-stops4));
    border-radius: 1000px;
    outline: 5px solid var(--color-wheel-bg);
    transform: rotate(128deg)
}

.color-wheel .wheel .tertiary2 .tertiary {
    margin: auto;
    transform: rotate(8deg)
}

.color-wheel .wheel .tertiary3 {
    width: 38em;
    height: 38em;
    padding: 4em 0;
    background: conic-gradient(var(--color-wheel-stops5));
    border-radius: 1000px;
    outline: 5px solid var(--color-wheel-bg);
    transform: rotate(123deg)
}

.color-wheel .wheel .tertiary3 .tertiary2 {
    margin: auto;
    transform: rotate(4deg)
}

.playground-code {
    position: relative;
    width: 100%;
    height: 100%;
    margin-top: 2px;
    overflow: hidden
}

.playground-code.hidden {
    margin-top: 0
}

.playground-code .highlight code {
    min-height: 3em
}

.playground-code .highlight,
.playground-code .highlight code {
    margin: 0;
    overflow: hidden
}

.playground-code pre {
    height: calc(100% + .2rem);
    margin: 0;
    pointer-events: none
}

.playground-results code {
    min-height: 3em
}

.playground-results pre {
    margin-bottom: 0
}

.playground-results .swatch-bar {
    min-height: calc(3em + 4px)
}

.playground-results .swatch-bar:empty {
    display: none
}

.playground-results .swatch-bar:empty+.highlight {
    border-color: transparent
}

.playground-results .color-command {
    margin-bottom: 0
}

.hidden .highlight,
.hidden .playground-inputs {
    display: none
}

.playground-code:not(.hidden) div.highlight {
    display: none
}

.playground-footer {
    margin-bottom: 1em;
    padding: .2205882353em 1.1764705882em .1470588235em;
    color: var(--md-code-hl-comment-color);
    font-size: .85em;
    background: var(--md-code-bg-color);
    border-bottom-right-radius: .1rem;
    border-bottom-left-radius: .1rem
}

.playground-footer hr {
    margin: 0 0 .1470588235em 0
}

.playground-footer .gamut {
    float: right
}

div.color-command {
    margin: 1em 0;
    line-height: 0
}

div.color-command .highlight {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0
}

div.color-command .highlight:not(:first-child) {
    border-top: 1px solid var(--md-default-fg-color--lightest);
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

div.color-command .highlight:not(:first-child) pre {
    margin-top: 0
}

#__notebook-source {
    height: 100%
}

#__notebook-render.hidden,
#__notebook-source.hidden {
    display: none
}

@media (color-gamut:p3) {
    .swatch-color {
        background: linear-gradient(in xyz-d65 to right, var(--swatch-stops))
    }
}

@media (color-gamut:rec2020) {
    .swatch-color {
        background: linear-gradient(in xyz-d65 to right, var(--swatch-stops))
    }
}

@media screen and (max-width:44.9375em) {
    .md-typeset>div.color-command {
        margin-right: -.8rem;
        margin-left: -.8rem
    }

    .md-typeset>div.color-command .highlight code {
        border-radius: 0
    }
}