@import url(https://cdnjs.cloudflare.com/ajax/libs/noty/3.1.4/noty.min.css);:root .gist .blob-code-inner{white-space:unset}#file-conic-example-css-LC2{-webkit-padding-start:4ch!important;padding-inline-start:4ch!important}@media (prefers-color-scheme:dark){:root .gist .gist-data,:root .gist .gist-meta,:root .gist-data tbody{background-color:#191919}:root .gist .gist-data,:root .gist .gist-file{border:1px solid #333;margin:0}.gist-data tbody td:nth-of-type(1){color:#333!important}.gist-data tbody td:nth-of-type(2){color:#fff!important}.pl-c{color:#7f7f7f!important}.pl-ent{color:var(--brand)!important}.pl-c1{color:#79c6d2!important}.pl-en,.pl-smi{color:#a87cde!important}}:root{--surface:rgb(27, 27, 27);--surface2:conic-gradient(
    at bottom left,
    hsl(200, 5%, 20%),
    hsl(0, 0%, 30%));--text:rgb(240, 240, 240);--text2:rgb(198, 198, 198);--brand:rgb(214, 127, 172)}@media (prefers-color-scheme:light){:root{--surface:rgb(255, 255, 254);--surface2:conic-gradient(
        at bottom left,
        hsl(200, 5%, 95%),
        hsl(200, 15%, 80%));--text:rgb(27, 27, 27);--text2:rgb(70, 70, 70);--brand:rgb(251, 102, 180)}}@media (prefers-color-scheme:light) and (dynamic-range:high){:root{--brand:color(display-p3 1 0 1)}}html{block-size:100%;inline-size:100%}body{min-block-size:100%;min-inline-size:100%;margin:0;box-sizing:border-box;color:var(--text);background:var(--surface);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}body,dd,dl,dt,figure,h1,h2,h3,h4,h5,h6,p,small,ul{margin:0}a{color:var(--brand);color:color(display-p3 0 .5 1)}a:visited{color:color(display-p3 .5 0 1)}h1,h2,h3,h4,h5,h6{line-height:1.5;max-inline-size:25ch}p{line-height:2;font-size:1.25rem;font-weight:300;max-inline-size:45ch}figure{margin:0;display:flex;flex-direction:column;justify-items:center;gap:1ch}figure>figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1ch 3ch}@property --conicAngle{syntax:'<angle>';inherits:false;initial-value:0deg}header{display:grid;align-items:center;justify-items:center;place-items:center;padding:15vmin 5vmin 5vmin}header>h1{--shine:white;background:conic-gradient(from 220deg at 50%,at -200%,var(--shine),#00f,#639,red,#ff69b4,var(--shine)) border-box;background:conic-gradient(from 220deg at 50% -200%,var(--shine),#00f,#639,red,#ff69b4,var(--shine)) border-box;-webkit-background-clip:text;-webkit-text-fill-color:transparent}@media (prefers-color-scheme:light){header>h1{background:conic-gradient(from 220deg at 50%,at -200%,#639,red,#ff69b4) border-box;background:conic-gradient(from 220deg at 50% -200%,#639,red,#ff69b4) border-box;-webkit-background-clip:text;-webkit-text-fill-color:transparent}}@media (prefers-reduced-motion:no-preference){header>h1{-webkit-animation:magic 7s ease infinite forwards;animation:magic 7s ease infinite forwards}}@supports (background:paint(something)){@media (prefers-reduced-motion:no-preference){header>h1{--shine:rgb(212, 212, 212);background:conic-gradient(from var(--conicAngle) at 50%,at -200%,var(--shine),#00f,#639,red,#ff69b4,var(--shine)) border-box;background:conic-gradient(from var(--conicAngle) at 50% -200%,var(--shine),#00f,#639,red,#ff69b4,var(--shine)) border-box;-webkit-background-clip:text;-webkit-text-fill-color:transparent}}}@-webkit-keyframes magic{to{--conicAngle:360deg}}@keyframes magic{to{--conicAngle:360deg}}h1{font-size:max(min(15vw,15vh),4rem);font-weight:lighter;line-height:1}small{color:var(--text2);display:inline-block;max-inline-size:25ch;line-height:1.5;font-size:1.25rem;font-weight:200}@media (prefers-reduced-motion:no-preference){small{-webkit-animation:slide-up 4s ease forwards;animation:slide-up 4s ease forwards}}aside{background:var(--surface2);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;border-radius:3ch;display:grid;justify-items:start;gap:3ch;padding:3ch 4ch;margin-inline:auto}aside h5{color:var(--text2)}aside>button{justify-self:end}@supports not (margin-inline:auto){aside{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}@-webkit-keyframes slide-up{from{opacity:0;transform:translateY(-.5ex)}}@keyframes slide-up{from{opacity:0;transform:translateY(-.5ex)}}.github-corner{fill:var(--brand);fill:url(#octocat-gradient);color:var(--surface)}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave 560ms ease-in-out;animation:octocat-wave 560ms ease-in-out}@-webkit-keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}._gradients_t1ms4_1{--widest:480px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(1px,100%),var(--widest)));align-content:center;justify-content:center;place-content:center;gap:10vmin;padding:5vmin}@media (min-width:241px){._gradients_t1ms4_1{--widest:40%}}@media (min-width:846px){._gradients_t1ms4_1{--widest:30%}}@media (min-width:846px){._gradients_t1ms4_1{--widest:320px;padding:10vmin 5vmin}}._conic-gradient_1ipxi_1{--border-darkness:100%}@media (prefers-color-scheme:light){._conic-gradient_1ipxi_1{--border-darkness:0%}}._conic-swatch_1ipxi_9{--swatch-border:5px;border-radius:25px;border:var(--swatch-border) solid hsl(0 0% var(--border-darkness) / 25%);aspect-ratio:1;transition:aspect-ratio .5s ease;box-shadow:0 20px 100px -45px var(--shadow,gray);cursor:pointer}._conic-swatch_1ipxi_9._focus-visible_1ipxi_1{outline-style:solid;outline-offset:1vmin;outline-color:var(--shadow,gray)}._conic-swatch_1ipxi_9:focus-visible{outline-style:solid;outline-offset:1vmin;outline-color:var(--shadow,gray)}@media (orientation:landscape){._conic-swatch_1ipxi_9{aspect-ratio:16/9}}@supports not (aspect-ratio:1){._conic-swatch_1ipxi_9{height:240px}@media (max-width:720px){._conic-swatch_1ipxi_9{height:120px}}}._mini-swatch_1ipxi_44{display:flex;gap:1ch}._mini-swatch_1ipxi_44>i{flex-shrink:0;width:2ch;aspect-ratio:1;background-color:var(--color,transparent);border-radius:50%;box-shadow:inset 0 0 0 1px hsl(0deg 0% var(--border-darkness) / 25%)}@supports not (aspect-ratio:1){._mini-swatch_1ipxi_44>i{height:2ch}}@media (orientation:landscape){figcaption>._mini-swatch_1ipxi_44:nth-of-type(even){flex-direction:row-reverse}}@media (max-width:320px){._mini-swatch_1ipxi_44{display:none}}