mp-design-system 0.9.8 → 0.9.16

package/dist/build/scss/library.css

@@ -1,2 +1,2 @@
-@import "https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap";.u-breakout{left:50%;left:calc(50% + var(--scrollbarWidth)/2.0001);width:100vw;width:calc(100vw - var(--scrollbarWidth));padding-left:safe-space(0);padding-right:safe-space(0);position:relative;transform:translate(-50vw)}.u-cutoff{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--gutter)),calc(100% - var(--gutter))100%,0 100%)}.u-cutoff--top-right{clip-path:polygon(0 0,calc(100% - var(--gutter))0,100% var(--gutter),100% 100%,0 100%)}.u-cutoff--top-left{clip-path:polygon(var(--gutter)0,100% 0,100% 100%,0 100%,0 var(--gutter))}.u-cutoff--bottom-left{clip-path:polygon(0 0,100% 0,100% 100%,var(--gutter)100%,0 calc(100% - var(--gutter)))}:root{--fluid-min-width:320;--fluid-max-width:1332;--fluid-screen:100vw;--fluid-bp:calc( (var(--fluid-screen) - var(--fluid-min-width)/16*1rem)/(var(--fluid-max-width) - var(--fluid-min-width)))}@media screen and (min-width:1332px){:root{--fluid-screen:calc(var(--fluid-max-width)*1px)}}:root{--f--2-min:12.64;--f--2-max:12.5;--step--2:calc( ((var(--f--2-min)/16)*1rem) + (var(--f--2-max) - var(--f--2-min))*var(--fluid-bp));--f--1-min:14.22;--f--1-max:15;--step--1:calc( ((var(--f--1-min)/16)*1rem) + (var(--f--1-max) - var(--f--1-min))*var(--fluid-bp));--f-0-min:16;--f-0-max:18;--step-0:calc( ((var(--f-0-min)/16)*1rem) + (var(--f-0-max) - var(--f-0-min))*var(--fluid-bp));--f-1-min:18;--f-1-max:21.6;--step-1:calc( ((var(--f-1-min)/16)*1rem) + (var(--f-1-max) - var(--f-1-min))*var(--fluid-bp));--f-2-min:20.25;--f-2-max:25.92;--step-2:calc( ((var(--f-2-min)/16)*1rem) + (var(--f-2-max) - var(--f-2-min))*var(--fluid-bp));--f-3-min:22.78;--f-3-max:31.1;--step-3:calc( ((var(--f-3-min)/16)*1rem) + (var(--f-3-max) - var(--f-3-min))*var(--fluid-bp));--f-4-min:25.63;--f-4-max:37.32;--step-4:calc( ((var(--f-4-min)/16)*1rem) + (var(--f-4-max) - var(--f-4-min))*var(--fluid-bp));--f-5-min:28.83;--f-5-max:44.79;--step-5:calc( ((var(--f-5-min)/16)*1rem) + (var(--f-5-max) - var(--f-5-min))*var(--fluid-bp));--f-6-min:32.44;--f-6-max:53.75;--step-6:calc( ((var(--f-6-min)/16)*1rem) + (var(--f-6-max) - var(--f-6-min))*var(--fluid-bp));--f-7-min:36.49;--f-7-max:64.5;--step-7:calc( ((var(--f-7-min)/16)*1rem) + (var(--f-7-max) - var(--f-7-min))*var(--fluid-bp));--f-8-min:41.05;--f-8-max:77.4;--step-8:calc( ((var(--f-8-min)/16)*1rem) + (var(--f-8-max) - var(--f-8-min))*var(--fluid-bp));--f-9-min:46.18;--f-9-max:92.88;--step-9:calc( ((var(--f-9-min)/16)*1rem) + (var(--f-9-max) - var(--f-9-min))*var(--fluid-bp));--f-10-min:51.96;--f-10-max:111.45;--step-10:calc( ((var(--f-10-min)/16)*1rem) + (var(--f-10-max) - var(--f-10-min))*var(--fluid-bp))}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(../Inter-Regular.ed77b881.woff2)format("woff2"),url(../Inter-Regular.ca6858d7.woff)format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(../Inter-SemiBold.dd034768.woff2)format("woff2"),url(../Inter-SemiBold.cc1168df.woff)format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(../Inter-Bold.af5441a3.woff2)format("woff2"),url(../Inter-Bold.419e8c71.woff)format("woff")}:root{--max-screen:83.25;--fc-screen:100vw;--fc-bp:calc((var(--fc-screen) - 20em)/(var(--max-screen) - 20));--fc-base:18;--fc-3xs:4.5;--space-3xs:calc(var(--fc-3xs)/16*1rem);--fc-2xs:9;--space-2xs:calc(var(--fc-2xs)/16*1rem);--fc-xs:13.5;--space-xs:calc(var(--fc-xs)/16*1rem);--fc-s:18;--space-s:calc(var(--fc-s)/16*1rem);--fc-m:27;--space-m:calc(var(--fc-m)/16*1rem);--fc-l:36;--space-l:calc(var(--fc-l)/16*1rem);--fc-xl:54;--space-xl:calc(var(--fc-xl)/16*1rem);--fc-2xl:72;--space-2xl:calc(var(--fc-2xl)/16*1rem);--fc-3xl:108;--space-3xl:calc(var(--fc-3xl)/16*1rem);--fc-4xl:144;--space-4xl:calc(var(--fc-4xl)/16*1rem);--space--3xs:calc( ((var(--fc-)/16)*1rem) + (var(--fc-3xs) - var(--fc-))*var(--fluid-bp));--space-3xs-2xs:calc( ((var(--fc-3xs)/16)*1rem) + (var(--fc-2xs) - var(--fc-3xs))*var(--fluid-bp));--space-2xs-xs:calc( ((var(--fc-2xs)/16)*1rem) + (var(--fc-xs) - var(--fc-2xs))*var(--fluid-bp));--space-xs-s:calc( ((var(--fc-xs)/16)*1rem) + (var(--fc-s) - var(--fc-xs))*var(--fluid-bp));--space-s-m:calc( ((var(--fc-s)/16)*1rem) + (var(--fc-m) - var(--fc-s))*var(--fluid-bp));--space-m-l:calc( ((var(--fc-m)/16)*1rem) + (var(--fc-l) - var(--fc-m))*var(--fluid-bp));--space-l-xl:calc( ((var(--fc-l)/16)*1rem) + (var(--fc-xl) - var(--fc-l))*var(--fluid-bp));--space-xl-2xl:calc( ((var(--fc-xl)/16)*1rem) + (var(--fc-2xl) - var(--fc-xl))*var(--fluid-bp));--space-2xl-3xl:calc( ((var(--fc-2xl)/16)*1rem) + (var(--fc-3xl) - var(--fc-2xl))*var(--fluid-bp));--space-3xl-4xl:calc( ((var(--fc-3xl)/16)*1rem) + (var(--fc-4xl) - var(--fc-3xl))*var(--fluid-bp));--space-s-l:calc( ((var(--fc-s)/16)*1rem) + (var(--fc-l) - var(--fc-s))*var(--fluid-bp));--space-s-m:calc( ((var(--fc-s)/16)*1rem) + (var(--fc-m) - var(--fc-s))*var(--fluid-bp));--space-xs-l:calc( ((var(--fc-xs)/16)*1rem) + (var(--fc-l) - var(--fc-xs))*var(--fluid-bp));--space-m-xl:calc( ((var(--fc-m)/16)*1rem) + (var(--fc-xl) - var(--fc-m))*var(--fluid-bp));--space-l-2xl:calc( ((var(--fc-l)/16)*1rem) + (var(--fc-2xl) - var(--fc-l))*var(--fluid-bp));--space-s-xl:calc( ((var(--fc-s)/16)*1rem) + (var(--fc-xl) - var(--fc-s))*var(--fluid-bp));--space-l-3xl:calc( ((var(--fc-l)/16)*1rem) + (var(--fc-3xl) - var(--fc-l))*var(--fluid-bp));--space-xl-3xl:calc( ((var(--fc-xl)/16)*1rem) + (var(--fc-3xl) - var(--fc-xl))*var(--fluid-bp));--space-l-4xl:calc( ((var(--fc-l)/16)*1rem) + (var(--fc-4xl) - var(--fc-l))*var(--fluid-bp));--space-3xs-m:calc( ((var(--fc-3xs)/16)*1rem) + (var(--fc-m) - var(--fc-3xs))*var(--fluid-bp));--gutter:var(--space-s-l)}@media screen and (min-width:75em){:root{--fc-screen:calc(var(--max-screen)*1rem)}}*,:before,:after{box-sizing:border-box}body{min-height:100vh;flex-direction:column;justify-content:flex-start;align-items:stretch;margin:0;display:flex}html{scroll-behavior:smooth}blockquote,pre,ol,ul,figure{margin:0;padding:0}img{max-width:100%;height:auto;border:0;display:block}article,aside,figure,footer,header,aside,main,nav{display:block}iframe{border:0}body{letter-spacing:-.01em;font:400 18px/1.2 Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:var(--step-0);color:#333}h1,h2,h3,h4,h5,h6,p,ul,ol,dl{margin:0}ul,ol,p{line-height:1.2}a{text-decoration:none}a,a:hover{cursor:pointer;color:inherit}.mp ol,.mp ul{list-style:none}cite,address{font-style:normal}[type=submit],[type=button],button{box-shadow:none;appearance:none;cursor:pointer;color:inherit;font:inherit;background:0 0;border:0;border-radius:0;padding:0}[disabled],.mp.c-button[disabled]{opacity:.5;cursor:not-allowed}label{cursor:pointer}fieldset{border:0;padding:.01em 0 0}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}code[class*=language-],pre[class*=language-]{text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;color:#3d7b87;tab-size:4;-webkit-hyphens:none;hyphens:none;background:#ebf1f2;font-family:Source Code Pro,monospace;font-size:1rem;line-height:1.5em}code[class*=language-]::selection,pre[class*=language-]::selection,code[class*=language-] ::selection,pre[class*=language-] ::selection{color:#263238;background:#cceae7}:not(pre)>code[class*=language-]{white-space:normal;border-radius:.2em;padding:.1em}pre[class*=language-]{padding:18px;padding:var(--space-s);position:relative;overflow:auto}.language-css>code,.language-sass>code,.language-scss>code{color:#f2a60d}[class*=language-] .namespace{opacity:.7}.token.atrule{color:#3d7b87}.token.attr-name{color:#00a2c2}.token.attr-value,.token.attribute{color:#13aa13}.token.boolean{color:#ce0058}.token.builtin,.token.cdata,.token.char,.token.class{color:#00a2c2}.token.class-name{color:#6182b8}.token.comment{color:#aabfc9}.token.constant{color:#3d7b87}.token.deleted{color:#ce0058}.token.doctype{color:#aabfc9}.token.entity{color:#ce0058}.token.function{color:#3d7b87}.token.hexcode{color:#f2a60d}.token.id,.token.important{color:#3d7b87;font-weight:700}.token.inserted{color:#00a2c2}.token.keyword{color:#3d7b87}.token.number{color:#f2a60d}.token.operator{color:#00a2c2}.token.prolog{color:#aabfc9}.token.property{color:#00a2c2}.token.pseudo-class,.token.pseudo-element{color:#13aa13}.token.punctuation,.token.regex{color:#00a2c2}.token.selector{color:#ce0058}.token.string{color:#13aa13}.token.symbol{color:#3d7b87}.token.tag{color:#005461}.token.unit{color:#f2a60d}.token.url,.token.variable{color:#ce0058}.u-hr,.c-library hr,.o-prose hr{padding-bottom:27px;padding-bottom:var(--space-m-xl);margin:0 0 27px;margin-bottom:var(--space-m-xl);border:0;border-bottom:1px solid #bfd3d6}.u-border-top{border-top:1px solid #bfd3d6}.u-border-bottom{border-bottom:1px solid #bfd3d6}.u-border{border:1px solid #bfd3d6}.o-grid{margin-bottom:-18px;margin-bottom:calc(-1*var(--gutter));width:100%;flex-wrap:wrap;justify-content:stretch;display:flex}.o-grid--float:after{content:" ";clear:both;display:table}.o-grid--between{justify-content:space-between}.o-grid--no-height-match{align-items:start}.o-grid>*{width:100%;margin-bottom:18px;margin-bottom:var(--gutter)}@media (min-width:40em){.o-grid--of-two>*{width:calc(50% - 9.1px);width:calc(50% - 1*var(--gutter)/2 - .1px)}.o-grid--of-two>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-two>:nth-child(2n+1){margin-left:0}}@media (min-width:55em){.o-grid--of-two-late>*{width:calc(50% - 9.1px);width:calc(50% - 1*var(--gutter)/2 - .1px)}.o-grid--of-two-late>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-two-late>:nth-child(2n+1){margin-left:0}}@media (min-width:38em) and (max-width:54.9375em){.o-grid--of-three>*{width:calc(50% - 9.1px);width:calc(50% - 1*var(--gutter)/2 - .1px)}.o-grid--of-three>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three>:nth-child(2n+1){margin-left:0}}@media (min-width:55em){.o-grid--of-three>*{width:calc(33.333% - 12.1px);width:calc(33.333% - 2*var(--gutter)/3 - .1px)}.o-grid--of-three>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three>:nth-child(3n+1){margin-left:0}}@media (min-width:38em) and (max-width:67.9375em){.o-grid--of-three-late>*{width:calc(50% - 9.1px);width:calc(50% - 1*var(--gutter)/2 - .1px)}.o-grid--of-three-late>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three-late>:nth-child(2n+1){margin-left:0}}@media (min-width:68em){.o-grid--of-three-late>*{width:calc(33.333% - 12.1px);width:calc(33.333% - 2*var(--gutter)/3 - .1px)}.o-grid--of-three-late>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three-late>:nth-child(3n+1){margin-left:0}}@media (min-width:38em) and (max-width:59.9375em){.o-grid--of-four>*{width:calc(50% - 9.1px);width:calc(50% - 1*var(--gutter)/2 - .1px)}.o-grid--of-four>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-four>:nth-child(2n+1){margin-left:0}}@media (min-width:60em){.o-grid--of-four>*{width:calc(25% - 13.6px);width:calc(25% - 3*var(--gutter)/4 - .1px)}.o-grid--of-four>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-four>:nth-child(4n+1){margin-left:0}}@media (max-width:54.9375em){.o-grid--swipeable{left:50%;left:calc(50% + var(--scrollbarWidth)/2.0001);width:100vw;width:calc(100vw - var(--scrollbarWidth));padding-left:var(--gutter);padding-right:var(--gutter);scroll-snap-type:x mandatory;scroll-padding:var(--gutter);-webkit-overflow-scrolling:touch;flex-wrap:nowrap;position:relative;overflow-x:scroll;transform:translate(-50vw)}.o-grid--swipeable>*{max-width:23em;width:calc(85vw - var(--gutter)*2.333);scroll-snap-align:start;scroll-snap-stop:always;flex:none}.o-grid--swipeable>*+*{margin-left:var(--gutter)!important}}@media (min-width:55em){.o-grid--4\/7>:nth-child(2n+2),.o-grid--4\/7-switch>:nth-child(2n+2){width:57.1429%}.o-grid--9\/3>:nth-child(2n+1),.o-grid--8\/3>:nth-child(2n+1),.o-grid--8\/4>:nth-child(2n+1),.o-grid--3\/9>:nth-child(2n+2),.o-grid--3\/8>:nth-child(2n+2),.o-grid--4\/8>:nth-child(2n+2),.o-grid--9\/3-switch>:nth-child(2n+2),.o-grid--8\/3-switch>:nth-child(2n+2),.o-grid--8\/4-switch>:nth-child(2n+2),.o-grid--3\/9-switch>:nth-child(2n+1),.o-grid--3\/8-switch>:nth-child(2n+1),.o-grid--4\/8-switch>:nth-child(2n+1){width:65.7143%}.o-grid--9\/3>:nth-child(2n+2),.o-grid--8\/3>:nth-child(2n+2),.o-grid--8\/4>:nth-child(2n+2),.o-grid--3\/9>:nth-child(2n+1),.o-grid--3\/8>:nth-child(2n+1),.o-grid--4\/8>:nth-child(2n+1),.o-grid--4\/7>:nth-child(2n+1),.o-grid--9\/3-switch>:nth-child(2n+1),.o-grid--8\/3-switch>:nth-child(2n+1),.o-grid--8\/4-switch>:nth-child(2n+1),.o-grid--3\/9-switch>:nth-child(2n+2),.o-grid--3\/8-switch>:nth-child(2n+2),.o-grid--4\/8-switch>:nth-child(2n+2),.o-grid--4\/7-switch>:nth-child(2n+1){width:31.4286%}.o-grid--3\/9>:nth-child(2n+2),.o-grid--3\/8>:nth-child(2n+2),.o-grid--4\/8>:nth-child(2n+2),.o-grid--9\/3>:nth-child(2n+2),.o-grid--8\/3>:nth-child(2n+2),.o-grid--8\/4>:nth-child(2n+2),.o-grid--9\/3-switch>:nth-child(2n+1),.o-grid--8\/3-switch>:nth-child(2n+1),.o-grid--8\/4-switch>:nth-child(2n+1),.o-grid--3\/9-switch>:nth-child(2n+1),.o-grid--3\/8-switch>:nth-child(2n+1),.o-grid--4\/8-switch>:nth-child(2n+1){margin-left:2.85714%;margin-right:0}.o-grid--8\/3>:nth-child(2n+1),.o-grid--3\/8>:nth-child(2n+2),.o-grid--8\/3-switch>:nth-child(2n+2),.o-grid--3\/8-switch>:nth-child(2n+1){max-width:828px}.o-grid[class*=switch]>:nth-child(2n+1){order:1}.o-grid--layout,.o-grid--layout>:nth-last-child(1),.o-grid--layout>:nth-last-child(2){margin-bottom:0}.o-grid--push{justify-content:space-between}.o-grid--pull{justify-content:flex-start}.o-grid--float{display:block}.o-grid--float:not([class*=switch])>:nth-child(2n+1),.o-grid--float[class*=switch]>:nth-child(2n+2){float:left}.o-grid--float:not([class*=switch])>:nth-child(2n+2),.o-grid--float[class*=switch]>:nth-child(2n+1){float:right}}@media (min-width:70em){.o-grid--9\/3>:nth-child(2n+1),.o-grid--8\/3>:nth-child(2n+1),.o-grid--3\/9>:nth-child(2n+2),.o-grid--3\/8>:nth-child(2n+2),.o-grid--9\/3-switch>:nth-child(2n+2),.o-grid--8\/3-switch>:nth-child(2n+2),.o-grid--3\/9-switch>:nth-child(2n+1),.o-grid--3\/8-switch>:nth-child(2n+1){width:74.2857%}.o-grid--9\/3>:nth-child(2n+2),.o-grid--8\/3>:nth-child(2n+2),.o-grid--3\/9>:nth-child(2n+1),.o-grid--3\/8>:nth-child(2n+1),.o-grid--9\/3-switch>:nth-child(2n+1),.o-grid--8\/3-switch>:nth-child(2n+1),.o-grid--3\/9-switch>:nth-child(2n+2),.o-grid--3\/8-switch>:nth-child(2n+2){width:22.8571%}}.c-library{min-height:100vh;grid-template-rows:auto 1fr auto;display:grid}.c-library--components{grid-template-rows:auto 1fr}.c-library__header{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);padding:9px;padding:var(--space-2xs);color:#fff;background:#005461;flex-direction:column;align-items:flex-start;font-weight:700}@media only screen and (min-width:650px){.c-library__header{letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2);flex-direction:row;align-items:center}}@media only screen and (min-width:1000px){.c-library__header{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);padding:18px;padding:var(--space-s)var(--space-s-l)}}.c-library__header img{filter:saturate(0)brightness(10)}.c-library__header .c-library-page-active{position:relative}.c-library__header .c-library-page-active:after{content:"";width:100%;border-bottom:1px solid ;position:absolute;bottom:-6px;left:0}.c-library__hero{color:#fff;background:linear-gradient(#005461,#0000),linear-gradient(45deg,#00a2c2,#005461)}.c-library__body{grid-template-rows:auto auto;display:grid}@media only screen and (min-width:600px){.c-library__body{grid-template-columns:10em 1fr}}@media only screen and (min-width:800px){.c-library__body{grid-template-columns:17em 1fr}}@media only screen and (min-width:600px){.c-library--components .c-library__body>*{height:calc(100vh - var(--headerHeight) - 1px);overflow-y:scroll}}.c-library__sidebar{letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2);scroll-behavior:none;border-right:1px solid #ebf1f2;grid-row:-1}@media only screen and (min-width:600px){.c-library__sidebar{grid-row:auto}}@media only screen and (min-width:800px){.c-library__sidebar{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1)}}.c-library__sidebar>*{padding:18px;padding:var(--space-s-l)var(--space-s)var(--space-s-l)var(--space-s-l)}.c-library__sidebar li{position:relative}.c-library__sidebar li a{color:#006daf}.c-library__sidebar li a:hover{color:#006daf;text-decoration:underline}.c-library__sidebar li+li{margin-top:13.5px;margin-top:var(--space-xs)}.c-library__sidebar ul ul{padding:13.5px;padding:var(--space-xs);padding-bottom:0}.c-library__sidebar ul ul li+li{margin-top:9px;margin-top:var(--space-2xs)}.c-library__skip-link{padding:13.5px;padding:var(--space-xs)}@media only screen and (min-width:600px){.c-library__skip-link{display:none}}.c-library__logo{max-width:15%;min-width:100px;justify-content:center;align-items:center;display:flex}@media only screen and (min-width:650px){.c-library__logo{justify-content:flex-start}}.c-library__logo-name{padding-left:13.5px;padding-left:var(--space-xs-s);margin-left:13.5px;margin-left:var(--space-xs-s);white-space:nowrap;border-left:1px solid #3d7b87}.c-library__logo-name span{display:block}.c-library__logo-name span:nth-last-child(3),.c-library__logo-name span:nth-last-child(1){text-transform:uppercase;letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);letter-spacing:.08em;color:#bfd3d6}.c-library__logo-name span:nth-last-child(2){color:#fff;letter-spacing:-.03em;font-size:37.32px;font-size:var(--step-4)}.c-library__logo-name span:nth-last-child(3){color:#3d7b87}.has-js .c-library__sidebar ul>li>ul{display:none}.has-js .c-library__sidebar ul>.c-library-accordion-open>ul{display:block}.c-library .c-library-accordion-open>.c-library-accordion__toggle{transform:rotate(180deg)}.c-library .c-library-accordion__toggle{color:#006daf;justify-content:center;align-items:center;padding:.25rem;font-size:1rem;line-height:1;display:flex;position:absolute;top:0;right:0}.c-library-menu-active{font-weight:700;position:relative}.c-library-menu-active:before{content:"▸ ";position:absolute;top:0;left:-17px}.c-library-stretch{flex-direction:column;flex:1;display:flex}.c-library__main{overflow-y:auto}@media only screen and (min-width:600px){.c-library__main{overflow-y:scroll}}.c-library__frame{width:100%;position:relative}.c-library__frame-links{right:0;top:calc(-1*(var(--space-m) + var(--space-s)));z-index:1;position:absolute}.c-library__frame-links a,.c-library__frame-links button{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);color:#959595;background:#bfd3d6;border-radius:0 0 .25em .25em;padding:.25em .666em}.c-library__frame-background{border-radius:0 0 0 .25em;top:0}.c-library__frame iframe{height:100%;width:100%;transition:all .3s cubic-bezier(.22,.61,.36,1);top:0;left:0}@media only screen and (min-width:600px){.c-library__frame iframe{position:absolute}}.c-library-code{font-family:Source Code Pro}.c-library-pre{padding:18px;padding:var(--space-s);background:#ebf1f2;font-family:Source Code Pro;line-height:1.4;overflow-x:auto}.c-library-pre--bordered{border-bottom:1px solid #bfd3d6}.c-library-version{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);color:#959595}.c-library-status{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);color:#959595;background:#bfd3d6;border-radius:.25em;padding:.25em .666em}.c-library-status--ready{color:#fff;background:#13aa13}.c-library-status--in-production,.c-library-status--development,.c-library-status--placeholder{color:#fff;background:#f2a60d}.c-library-status--deprecated{color:#fff;background:#ce0058}.c-library__swatch-grid{margin-bottom:var(--space-m);grid-auto-rows:minmax(4em,auto);gap:0 1em;display:grid}@media only screen and (min-width:680px){.c-library__swatch-grid{grid-template-rows:5em auto;grid-template-columns:repeat(5,auto);gap:0}}.c-library__swatch-grid--has-labels{grid-template-rows:auto;grid-template-columns:15em auto;grid-auto-flow:row}@media only screen and (min-width:1000px){.c-library__swatch-grid--has-labels{grid-template-rows:5em auto;grid-template-columns:repeat(5,1fr);grid-auto-flow:column}}.c-library__swatches,.c-library__swatch-labels{grid-template-columns:repeat(auto-fit,165px);display:grid}.c-library__swatch{display:flex}.c-library__swatch>*{justify-content:center;margin:auto;font-weight:700}.c-library__swatches>*{height:0;padding-bottom:50%;position:relative}.c-library__swatches>*>*{text-align:center;height:100%;width:100%;justify-content:center;align-items:center;padding:.5rem;font-weight:700;display:flex;position:absolute;top:0;left:0}.c-library__swatch-grid table{letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2)}.c-library__swatch-grid table td,.c-library__swatch-grid table th{padding:9px 0 9px 4.5px;padding:var(--space-2xs)0 var(--space-2xs)var(--space-3xs)}.c-library__swatch-grid table th{width:3em}.c-library__swatch-grid table td{font-family:monospace}.c-library__image-row{max-width:100%;display:flex}.c-library__image-row img{object-fit:contain;width:6%;flex:auto;margin:0 2% 0 0}.c-library__image-row img:last-child{margin-right:0}.c-library__space{display:block}.c-library__space span{height:0;background:linear-gradient(45deg,#fff3 0%,#fff0 100%),#ce005880;padding-bottom:100%;display:block;position:relative}.c-library__space code{margin-left:18px;margin-left:var(--space-s);white-space:nowrap;line-height:1;position:absolute;top:50%;left:100%;transform:translateY(-50%)}.c-library-grid{color:#fff;letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);background:#00758c;justify-content:center;align-items:center;padding:3rem 1rem;display:flex}.c-library-grid--alt{background:#3d7b87;padding:2rem 1rem}.c-library-grid--alt:before{content:" ";display:block}.c-library-grid--first{background:#005461;padding:2rem 1rem}.c-library-grid--first:before{content:"First on mobile"}.c-library-copy{position:relative}.c-library-copy__trigger{letter-spacing:-.01em;font-size:15px;font-weight:700;font-size:var(--step--1);padding:4.5px 9px;padding:var(--space-3xs)var(--space-2xs);letter-spacing:.02em;background:#bfd3d6;position:absolute;bottom:0;right:0}.c-library-copy__trigger:hover{color:#ce0058}.c-library__typo__sidebar{width:14.2857%}.c-library__typo__sidebar span{display:block}.c-library__typo__sidebar .x2{height:2em;border:1px solid #333;border-width:1px 0;margin-top:4.25em;line-height:2em}.c-library__typo__main{width:82.8572%}.c-library__semi{font-weight:600}.c-library__photo-grid{margin-top:54px;margin-top:var(--space-xl);grid-template-columns:1fr;gap:2px;display:grid}@media only screen and (min-width:880px){.c-library__photo-grid{grid-auto-flow:dense;grid-auto-rows:auto}.c-library__photo-grid img{height:100%;width:100%;object-fit:cover}.c-library__photo-grid div{grid-area:1/1/2/3;display:flex}.c-library__photo-grid div h2{margin:auto var(--space-s)}.c-library__photo-grid.grid-1{grid-template-columns:40% 20% 40%;grid-template-rows:var(--space-2xl)400px 400px}.c-library__photo-grid.grid-1 img:nth-child(2){grid-area:2/1/3/3}.c-library__photo-grid.grid-1 img:nth-child(3){grid-area:1/3/3/4}.c-library__photo-grid.grid-1 img:nth-child(5){grid-column:2/4}.c-library__photo-grid.grid-2{grid-template-columns:50% 50%;grid-template-rows:var(--space-2xl)300px 300px}.c-library__photo-grid.grid-2 div{grid-column:1/2}.c-library__photo-grid.grid-2 img:nth-child(2){grid-row:2/4}.c-library__photo-grid.grid-2 img:nth-child(3){grid-row:1/3}}.c-library .c-alert ul li{margin-left:1em;padding-left:.5rem;list-style:outside url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"20\" viewBox=\"0 0 10 20\"><circle cx=\"5\" cy=\"14\" r=\"3.5\" fill=\"%2313AA13\" fill-rule=\"evenodd\"/></svg>")}.c-library .c-alert ul li h3,.c-library .c-alert ul li h4{color:#13aa13;font-size:1em;line-height:1.6}@media only screen and (max-width:1050px){.c-library__logo-name span:nth-last-child(3),.c-library__logo-name span:nth-last-child(1){letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2)}.c-library__logo-name span:nth-last-child(2){letter-spacing:-.02em;font-size:21.6px;font-size:var(--step-1)}.c-library__header nav li:last-child{display:none}}@media only screen and (min-width:650px) and (max-width:700px),screen and (max-width:450px){.c-library__header nav .u-row{gap:9px;gap:var(--space-2xs);letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2)}}@media only screen and (max-width:650px){.c-library__header nav a{padding:9px 0;padding:var(--space-2xs)0;display:block}.c-library__header .c-library-page-active:after{bottom:4.5px;bottom:var(--space-3xs)}}
+@import "https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap";.u-breakout{left:50%;left:calc(50% + var(--scrollbarWidth)/2.0001);width:100vw;width:calc(100vw - var(--scrollbarWidth));padding-left:safe-space(0);padding-right:safe-space(0);position:relative;transform:translate(-50vw)}.u-cutoff{clip-path:polygon(0 0,100% 0,100% calc(100% - var(--gutter)),calc(100% - var(--gutter))100%,0 100%)}.u-cutoff--top-right{clip-path:polygon(0 0,calc(100% - var(--gutter))0,100% var(--gutter),100% 100%,0 100%)}.u-cutoff--top-left{clip-path:polygon(var(--gutter)0,100% 0,100% 100%,0 100%,0 var(--gutter))}.u-cutoff--bottom-left{clip-path:polygon(0 0,100% 0,100% 100%,var(--gutter)100%,0 calc(100% - var(--gutter)))}:root{--fluid-min-width:320;--fluid-max-width:1332;--fluid-screen:100vw;--fluid-bp:calc( (var(--fluid-screen) - var(--fluid-min-width)/16*1rem)/(var(--fluid-max-width) - var(--fluid-min-width)))}@media screen and (min-width:1332px){:root{--fluid-screen:calc(var(--fluid-max-width)*1px)}}:root{--f--2-min:12.64;--f--2-max:12.5;--step--2:calc( ((var(--f--2-min)/16)*1rem) + (var(--f--2-max) - var(--f--2-min))*var(--fluid-bp));--f--1-min:14.22;--f--1-max:15;--step--1:calc( ((var(--f--1-min)/16)*1rem) + (var(--f--1-max) - var(--f--1-min))*var(--fluid-bp));--f-0-min:16;--f-0-max:18;--step-0:calc( ((var(--f-0-min)/16)*1rem) + (var(--f-0-max) - var(--f-0-min))*var(--fluid-bp));--f-1-min:18;--f-1-max:21.6;--step-1:calc( ((var(--f-1-min)/16)*1rem) + (var(--f-1-max) - var(--f-1-min))*var(--fluid-bp));--f-2-min:20.25;--f-2-max:25.92;--step-2:calc( ((var(--f-2-min)/16)*1rem) + (var(--f-2-max) - var(--f-2-min))*var(--fluid-bp));--f-3-min:22.78;--f-3-max:31.1;--step-3:calc( ((var(--f-3-min)/16)*1rem) + (var(--f-3-max) - var(--f-3-min))*var(--fluid-bp));--f-4-min:25.63;--f-4-max:37.32;--step-4:calc( ((var(--f-4-min)/16)*1rem) + (var(--f-4-max) - var(--f-4-min))*var(--fluid-bp));--f-5-min:28.83;--f-5-max:44.79;--step-5:calc( ((var(--f-5-min)/16)*1rem) + (var(--f-5-max) - var(--f-5-min))*var(--fluid-bp));--f-6-min:32.44;--f-6-max:53.75;--step-6:calc( ((var(--f-6-min)/16)*1rem) + (var(--f-6-max) - var(--f-6-min))*var(--fluid-bp));--f-7-min:36.49;--f-7-max:64.5;--step-7:calc( ((var(--f-7-min)/16)*1rem) + (var(--f-7-max) - var(--f-7-min))*var(--fluid-bp));--f-8-min:41.05;--f-8-max:77.4;--step-8:calc( ((var(--f-8-min)/16)*1rem) + (var(--f-8-max) - var(--f-8-min))*var(--fluid-bp));--f-9-min:46.18;--f-9-max:92.88;--step-9:calc( ((var(--f-9-min)/16)*1rem) + (var(--f-9-max) - var(--f-9-min))*var(--fluid-bp));--f-10-min:51.96;--f-10-max:111.45;--step-10:calc( ((var(--f-10-min)/16)*1rem) + (var(--f-10-max) - var(--f-10-min))*var(--fluid-bp))}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(../Inter-Regular.ed77b881.woff2)format("woff2"),url(../Inter-Regular.ca6858d7.woff)format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(../Inter-SemiBold.dd034768.woff2)format("woff2"),url(../Inter-SemiBold.cc1168df.woff)format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(../Inter-Bold.af5441a3.woff2)format("woff2"),url(../Inter-Bold.419e8c71.woff)format("woff")}:root{--max-screen:83.25;--fc-screen:100vw;--fc-bp:calc((var(--fc-screen) - 20em)/(var(--max-screen) - 20));--fc-base:18;--fc-3xs:4.5;--space-3xs:calc(var(--fc-3xs)/16*1rem);--fc-2xs:9;--space-2xs:calc(var(--fc-2xs)/16*1rem);--fc-xs:13.5;--space-xs:calc(var(--fc-xs)/16*1rem);--fc-s:18;--space-s:calc(var(--fc-s)/16*1rem);--fc-m:27;--space-m:calc(var(--fc-m)/16*1rem);--fc-l:36;--space-l:calc(var(--fc-l)/16*1rem);--fc-xl:54;--space-xl:calc(var(--fc-xl)/16*1rem);--fc-2xl:72;--space-2xl:calc(var(--fc-2xl)/16*1rem);--fc-3xl:108;--space-3xl:calc(var(--fc-3xl)/16*1rem);--fc-4xl:144;--space-4xl:calc(var(--fc-4xl)/16*1rem);--space--3xs:calc( ((var(--fc-)/16)*1rem) + (var(--fc-3xs) - var(--fc-))*var(--fluid-bp));--space-3xs-2xs:calc( ((var(--fc-3xs)/16)*1rem) + (var(--fc-2xs) - var(--fc-3xs))*var(--fluid-bp));--space-2xs-xs:calc( ((var(--fc-2xs)/16)*1rem) + (var(--fc-xs) - var(--fc-2xs))*var(--fluid-bp));--space-xs-s:calc( ((var(--fc-xs)/16)*1rem) + (var(--fc-s) - var(--fc-xs))*var(--fluid-bp));--space-s-m:calc( ((var(--fc-s)/16)*1rem) + (var(--fc-m) - var(--fc-s))*var(--fluid-bp));--space-m-l:calc( ((var(--fc-m)/16)*1rem) + (var(--fc-l) - var(--fc-m))*var(--fluid-bp));--space-l-xl:calc( ((var(--fc-l)/16)*1rem) + (var(--fc-xl) - var(--fc-l))*var(--fluid-bp));--space-xl-2xl:calc( ((var(--fc-xl)/16)*1rem) + (var(--fc-2xl) - var(--fc-xl))*var(--fluid-bp));--space-2xl-3xl:calc( ((var(--fc-2xl)/16)*1rem) + (var(--fc-3xl) - var(--fc-2xl))*var(--fluid-bp));--space-3xl-4xl:calc( ((var(--fc-3xl)/16)*1rem) + (var(--fc-4xl) - var(--fc-3xl))*var(--fluid-bp));--space-s-l:calc( ((var(--fc-s)/16)*1rem) + (var(--fc-l) - var(--fc-s))*var(--fluid-bp));--space-s-m:calc( ((var(--fc-s)/16)*1rem) + (var(--fc-m) - var(--fc-s))*var(--fluid-bp));--space-xs-l:calc( ((var(--fc-xs)/16)*1rem) + (var(--fc-l) - var(--fc-xs))*var(--fluid-bp));--space-m-xl:calc( ((var(--fc-m)/16)*1rem) + (var(--fc-xl) - var(--fc-m))*var(--fluid-bp));--space-l-2xl:calc( ((var(--fc-l)/16)*1rem) + (var(--fc-2xl) - var(--fc-l))*var(--fluid-bp));--space-s-xl:calc( ((var(--fc-s)/16)*1rem) + (var(--fc-xl) - var(--fc-s))*var(--fluid-bp));--space-l-3xl:calc( ((var(--fc-l)/16)*1rem) + (var(--fc-3xl) - var(--fc-l))*var(--fluid-bp));--space-xl-3xl:calc( ((var(--fc-xl)/16)*1rem) + (var(--fc-3xl) - var(--fc-xl))*var(--fluid-bp));--space-l-4xl:calc( ((var(--fc-l)/16)*1rem) + (var(--fc-4xl) - var(--fc-l))*var(--fluid-bp));--space-3xs-m:calc( ((var(--fc-3xs)/16)*1rem) + (var(--fc-m) - var(--fc-3xs))*var(--fluid-bp));--gutter:var(--space-s-l)}@media screen and (min-width:75em){:root{--fc-screen:calc(var(--max-screen)*1rem)}}*,:before,:after{box-sizing:border-box}body{min-height:100vh;flex-direction:column;justify-content:flex-start;align-items:stretch;margin:0;display:flex}html{scroll-behavior:smooth}blockquote,pre,ol,ul,figure{margin:0;padding:0}img{max-width:100%;height:auto;border:0;display:block}article,aside,figure,footer,header,aside,main,nav{display:block}iframe{border:0}body{letter-spacing:-.01em;font:400 18px/1.2 Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:var(--step-0);color:#333}h1,h2,h3,h4,h5,h6,p,ul,ol,dl{margin:0}ul,ol,p{line-height:1.2}a{text-decoration:none}a,a:hover{cursor:pointer;color:inherit}.mp ol,.mp ul{list-style:none}cite,address{font-style:normal}[type=submit],[type=button],button{box-shadow:none;appearance:none;cursor:pointer;color:inherit;font:inherit;background:0 0;border:0;border-radius:0;padding:0}[disabled],.mp.c-button[disabled]{opacity:.5;cursor:not-allowed}label{cursor:pointer}fieldset{border:0;padding:.01em 0 0}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}code[class*=language-],pre[class*=language-]{text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;color:#3d7b87;tab-size:4;-webkit-hyphens:none;hyphens:none;background:#ebf1f2;font-family:Source Code Pro,monospace;font-size:1rem;line-height:1.5em}code[class*=language-]::selection,pre[class*=language-]::selection,code[class*=language-] ::selection,pre[class*=language-] ::selection{color:#263238;background:#cceae7}:not(pre)>code[class*=language-]{white-space:normal;border-radius:.2em;padding:.1em}pre[class*=language-]{padding:18px;padding:var(--space-s);position:relative;overflow:auto}.language-css>code,.language-sass>code,.language-scss>code{color:#f2a60d}[class*=language-] .namespace{opacity:.7}.token.atrule{color:#3d7b87}.token.attr-name{color:#00a2c2}.token.attr-value,.token.attribute{color:#13aa13}.token.boolean{color:#ce0058}.token.builtin,.token.cdata,.token.char,.token.class{color:#00a2c2}.token.class-name{color:#6182b8}.token.comment{color:#aabfc9}.token.constant{color:#3d7b87}.token.deleted{color:#ce0058}.token.doctype{color:#aabfc9}.token.entity{color:#ce0058}.token.function{color:#3d7b87}.token.hexcode{color:#f2a60d}.token.id,.token.important{color:#3d7b87;font-weight:700}.token.inserted{color:#00a2c2}.token.keyword{color:#3d7b87}.token.number{color:#f2a60d}.token.operator{color:#00a2c2}.token.prolog{color:#aabfc9}.token.property{color:#00a2c2}.token.pseudo-class,.token.pseudo-element{color:#13aa13}.token.punctuation,.token.regex{color:#00a2c2}.token.selector{color:#ce0058}.token.string{color:#13aa13}.token.symbol{color:#3d7b87}.token.tag{color:#005461}.token.unit{color:#f2a60d}.token.url,.token.variable{color:#ce0058}.u-hr,.c-library hr,.o-prose hr{padding-bottom:27px;padding-bottom:var(--space-m-xl);margin:0 0 27px;margin-bottom:var(--space-m-xl);border:0;border-bottom:1px solid #bfd3d6}.u-border-top{border-top:1px solid #bfd3d6}.u-border-bottom{border-bottom:1px solid #bfd3d6}.u-border{border:1px solid #bfd3d6}.o-grid{margin-bottom:-18px;margin-bottom:calc(-1*var(--gutter));width:100%;flex-wrap:wrap;justify-content:stretch;display:flex}.o-grid--float:after{content:" ";clear:both;display:table}.o-grid--between{justify-content:space-between}.o-grid--no-height-match{align-items:start}.o-grid>*{width:100%;margin-bottom:18px;margin-bottom:var(--gutter)}@media (min-width:40em){.o-grid--of-two>*{width:calc(50% - (($columns - 1)*18px/$columns) - .1px);width:calc(50% - 1*var(--gutter)/2 - .1px)}.o-grid--of-two>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-two>:nth-child(2n+1){margin-left:0}}@media (min-width:55em){.o-grid--of-two-late>*{width:calc(50% - (($columns - 1)*18px/$columns) - .1px);width:calc(50% - 1*var(--gutter)/2 - .1px)}.o-grid--of-two-late>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-two-late>:nth-child(2n+1){margin-left:0}}@media (min-width:22.4em){.o-grid--of-two-early>*{width:calc(50% - (($columns - 1)*18px/$columns) - .1px);width:calc(50% - 1*var(--gutter)/2 - .1px)}.o-grid--of-two-early>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-two-early>:nth-child(2n+1){margin-left:0}}@media (min-width:38em) and (max-width:54.9375em){.o-grid--of-three>*{width:calc(50% - (($columns - 1)*18px/$columns) - .1px);width:calc(50% - 1*var(--gutter)/2 - .1px)}.o-grid--of-three>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three>:nth-child(2n+1){margin-left:0}}@media (min-width:55em){.o-grid--of-three>*{width:calc(33.3333% - (($columns - 1)*18px/$columns) - .1px);width:calc(33.3333% - 2*var(--gutter)/3 - .1px)}.o-grid--of-three>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three>:nth-child(3n+1){margin-left:0}}@media (min-width:38em) and (max-width:67.9375em){.o-grid--of-three-late>*{width:calc(50% - (($columns - 1)*18px/$columns) - .1px);width:calc(50% - 1*var(--gutter)/2 - .1px)}.o-grid--of-three-late>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three-late>:nth-child(2n+1){margin-left:0}}@media (min-width:68em){.o-grid--of-three-late>*{width:calc(33.3333% - (($columns - 1)*18px/$columns) - .1px);width:calc(33.3333% - 2*var(--gutter)/3 - .1px)}.o-grid--of-three-late>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three-late>:nth-child(3n+1){margin-left:0}}@media (min-width:22.4em) and (max-width:54.9375em){.o-grid--of-three-early>*{width:calc(50% - (($columns - 1)*18px/$columns) - .1px);width:calc(50% - 1*var(--gutter)/2 - .1px)}.o-grid--of-three-early>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three-early>:nth-child(2n+1){margin-left:0}}@media (min-width:55em){.o-grid--of-three-early>*{width:calc(33.3333% - (($columns - 1)*18px/$columns) - .1px);width:calc(33.3333% - 2*var(--gutter)/3 - .1px)}.o-grid--of-three-early>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three-early>:nth-child(3n+1){margin-left:0}}@media (min-width:38em) and (max-width:59.9375em){.o-grid--of-four>*{width:calc(50% - (($columns - 1)*18px/$columns) - .1px);width:calc(50% - 1*var(--gutter)/2 - .1px)}.o-grid--of-four>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-four>:nth-child(2n+1){margin-left:0}}@media (min-width:60em){.o-grid--of-four>*{width:calc(25% - (($columns - 1)*18px/$columns) - .1px);width:calc(25% - 3*var(--gutter)/4 - .1px)}.o-grid--of-four>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-four>:nth-child(4n+1){margin-left:0}}@media (min-width:22.4em) and (max-width:59.9375em){.o-grid--of-four-early>*{width:calc(50% - (($columns - 1)*18px/$columns) - .1px);width:calc(50% - 1*var(--gutter)/2 - .1px)}.o-grid--of-four-early>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-four-early>:nth-child(2n+1){margin-left:0}}@media (min-width:60em){.o-grid--of-four-early>*{width:calc(25% - (($columns - 1)*18px/$columns) - .1px);width:calc(25% - 3*var(--gutter)/4 - .1px)}.o-grid--of-four-early>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-four-early>:nth-child(4n+1){margin-left:0}}@media (max-width:54.9375em){.o-grid--swipeable{left:50%;left:calc(50% + var(--scrollbarWidth)/2.0001);width:100vw;width:calc(100vw - var(--scrollbarWidth));padding-left:var(--gutter);padding-right:var(--gutter);scroll-snap-type:x mandatory;scroll-padding:var(--gutter);-webkit-overflow-scrolling:touch;flex-wrap:nowrap;position:relative;overflow-x:scroll;transform:translate(-50vw)}.o-grid--swipeable>*{max-width:23em;width:calc(85vw - var(--gutter)*2.333);scroll-snap-align:start;scroll-snap-stop:always;flex:none}.o-grid--swipeable>*+*{margin-left:var(--gutter)!important}}@media (min-width:55em){.o-grid--4\/7>:nth-child(2n+2),.o-grid--4\/7-switch>:nth-child(2n+2){width:57.1429%}.o-grid--9\/3>:nth-child(2n+1),.o-grid--8\/3>:nth-child(2n+1),.o-grid--8\/4>:nth-child(2n+1),.o-grid--3\/9>:nth-child(2n+2),.o-grid--3\/8>:nth-child(2n+2),.o-grid--4\/8>:nth-child(2n+2),.o-grid--9\/3-switch>:nth-child(2n+2),.o-grid--8\/3-switch>:nth-child(2n+2),.o-grid--8\/4-switch>:nth-child(2n+2),.o-grid--3\/9-switch>:nth-child(2n+1),.o-grid--3\/8-switch>:nth-child(2n+1),.o-grid--4\/8-switch>:nth-child(2n+1){width:65.7143%}.o-grid--9\/3>:nth-child(2n+2),.o-grid--8\/3>:nth-child(2n+2),.o-grid--8\/4>:nth-child(2n+2),.o-grid--3\/9>:nth-child(2n+1),.o-grid--3\/8>:nth-child(2n+1),.o-grid--4\/8>:nth-child(2n+1),.o-grid--4\/7>:nth-child(2n+1),.o-grid--9\/3-switch>:nth-child(2n+1),.o-grid--8\/3-switch>:nth-child(2n+1),.o-grid--8\/4-switch>:nth-child(2n+1),.o-grid--3\/9-switch>:nth-child(2n+2),.o-grid--3\/8-switch>:nth-child(2n+2),.o-grid--4\/8-switch>:nth-child(2n+2),.o-grid--4\/7-switch>:nth-child(2n+1){width:31.4286%}.o-grid--3\/9>:nth-child(2n+2),.o-grid--3\/8>:nth-child(2n+2),.o-grid--4\/8>:nth-child(2n+2),.o-grid--9\/3>:nth-child(2n+2),.o-grid--8\/3>:nth-child(2n+2),.o-grid--8\/4>:nth-child(2n+2),.o-grid--9\/3-switch>:nth-child(2n+1),.o-grid--8\/3-switch>:nth-child(2n+1),.o-grid--8\/4-switch>:nth-child(2n+1),.o-grid--3\/9-switch>:nth-child(2n+1),.o-grid--3\/8-switch>:nth-child(2n+1),.o-grid--4\/8-switch>:nth-child(2n+1){margin-left:2.85714%;margin-right:0}.o-grid--8\/3>:nth-child(2n+1),.o-grid--3\/8>:nth-child(2n+2),.o-grid--8\/3-switch>:nth-child(2n+2),.o-grid--3\/8-switch>:nth-child(2n+1){max-width:828px}.o-grid[class*=switch]>:nth-child(2n+1){order:1}.o-grid--layout,.o-grid--layout>:nth-last-child(1),.o-grid--layout>:nth-last-child(2){margin-bottom:0}.o-grid--push{justify-content:space-between}.o-grid--pull{justify-content:flex-start}.o-grid--float{display:block}.o-grid--float:not([class*=switch])>:nth-child(2n+1),.o-grid--float[class*=switch]>:nth-child(2n+2){float:left}.o-grid--float:not([class*=switch])>:nth-child(2n+2),.o-grid--float[class*=switch]>:nth-child(2n+1){float:right}}@media (min-width:70em){.o-grid--9\/3>:nth-child(2n+1),.o-grid--8\/3>:nth-child(2n+1),.o-grid--3\/9>:nth-child(2n+2),.o-grid--3\/8>:nth-child(2n+2),.o-grid--9\/3-switch>:nth-child(2n+2),.o-grid--8\/3-switch>:nth-child(2n+2),.o-grid--3\/9-switch>:nth-child(2n+1),.o-grid--3\/8-switch>:nth-child(2n+1){width:74.2857%}.o-grid--9\/3>:nth-child(2n+2),.o-grid--8\/3>:nth-child(2n+2),.o-grid--3\/9>:nth-child(2n+1),.o-grid--3\/8>:nth-child(2n+1),.o-grid--9\/3-switch>:nth-child(2n+1),.o-grid--8\/3-switch>:nth-child(2n+1),.o-grid--3\/9-switch>:nth-child(2n+2),.o-grid--3\/8-switch>:nth-child(2n+2){width:22.8571%}}.c-library{min-height:100vh;grid-template-rows:auto 1fr auto;display:grid}.c-library--components{grid-template-rows:auto 1fr}.c-library__header{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);padding:9px;padding:var(--space-2xs);color:#fff;background:#005461;flex-direction:column;align-items:flex-start;font-weight:700}@media only screen and (min-width:650px){.c-library__header{letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2);flex-direction:row;align-items:center}}@media only screen and (min-width:1000px){.c-library__header{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);padding:18px;padding:var(--space-s)var(--space-s-l)}}.c-library__header img{filter:saturate(0)brightness(10)}.c-library__header .c-library-page-active{position:relative}.c-library__header .c-library-page-active:after{content:"";width:100%;border-bottom:1px solid ;position:absolute;bottom:-6px;left:0}.c-library__hero{color:#fff;background:linear-gradient(#005461,#0000),linear-gradient(45deg,#00a2c2,#005461)}.c-library__body{grid-template-rows:auto auto;display:grid}@media only screen and (min-width:600px){.c-library__body{grid-template-columns:10em 1fr}}@media only screen and (min-width:800px){.c-library__body{grid-template-columns:17em 1fr}}@media only screen and (min-width:600px){.c-library--components .c-library__body>*{height:calc(100vh - var(--headerHeight) - 1px);overflow-y:scroll}}.c-library__sidebar{letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2);scroll-behavior:none;border-right:1px solid #ebf1f2;grid-row:-1}@media only screen and (min-width:600px){.c-library__sidebar{grid-row:auto}}@media only screen and (min-width:800px){.c-library__sidebar{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1)}}.c-library__sidebar>*{padding:18px;padding:var(--space-s-l)var(--space-s)var(--space-s-l)var(--space-s-l)}.c-library__sidebar li{position:relative}.c-library__sidebar li a{color:#006daf}.c-library__sidebar li a:hover{color:#006daf;text-decoration:underline}.c-library__sidebar li+li{margin-top:13.5px;margin-top:var(--space-xs)}.c-library__sidebar ul ul{padding:13.5px;padding:var(--space-xs);padding-bottom:0}.c-library__sidebar ul ul li+li{margin-top:9px;margin-top:var(--space-2xs)}.c-library__skip-link{padding:13.5px;padding:var(--space-xs)}@media only screen and (min-width:600px){.c-library__skip-link{display:none}}.c-library__logo{max-width:15%;min-width:100px;justify-content:center;align-items:center;display:flex}@media only screen and (min-width:650px){.c-library__logo{justify-content:flex-start}}.c-library__logo-name{padding-left:13.5px;padding-left:var(--space-xs-s);margin-left:13.5px;margin-left:var(--space-xs-s);white-space:nowrap;border-left:1px solid #3d7b87}.c-library__logo-name span{display:block}.c-library__logo-name span:nth-last-child(3),.c-library__logo-name span:nth-last-child(1){text-transform:uppercase;letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);letter-spacing:.08em;color:#bfd3d6}.c-library__logo-name span:nth-last-child(2){color:#fff;letter-spacing:-.03em;font-size:37.32px;font-size:var(--step-4)}.c-library__logo-name span:nth-last-child(3){color:#3d7b87}.has-js .c-library__sidebar ul>li>ul{display:none}.has-js .c-library__sidebar ul>.c-library-accordion-open>ul{display:block}.c-library .c-library-accordion-open>.c-library-accordion__toggle{transform:rotate(180deg)}.c-library .c-library-accordion__toggle{color:#006daf;justify-content:center;align-items:center;padding:.25rem;font-size:1rem;line-height:1;display:flex;position:absolute;top:0;right:0}.c-library-menu-active{font-weight:700;position:relative}.c-library-menu-active:before{content:"▸ ";position:absolute;top:0;left:-17px}.c-library-stretch{flex-direction:column;flex:1;display:flex}.c-library__main{overflow-y:auto}@media only screen and (min-width:600px){.c-library__main{overflow-y:scroll}}.c-library__frame{width:100%;position:relative}.c-library__frame-links{right:0;top:calc(-1*(var(--space-m) + var(--space-s)));z-index:1;position:absolute}.c-library__frame-links a,.c-library__frame-links button{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);color:#959595;background:#bfd3d6;border-radius:0 0 .25em .25em;padding:.25em .666em}.c-library__frame-background{border-radius:0 0 0 .25em;top:0}.c-library__frame iframe{height:100%;width:100%;transition:all .3s cubic-bezier(.22,.61,.36,1);top:0;left:0}@media only screen and (min-width:600px){.c-library__frame iframe{position:absolute}}.c-library-code{font-family:Source Code Pro}.c-library-pre{padding:18px;padding:var(--space-s);background:#ebf1f2;font-family:Source Code Pro;line-height:1.4;overflow-x:auto}.c-library-pre--bordered{border-bottom:1px solid #bfd3d6}.c-library-version{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);color:#959595}.c-library-status{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);color:#959595;background:#bfd3d6;border-radius:.25em;padding:.25em .666em}.c-library-status--ready{color:#fff;background:#13aa13}.c-library-status--in-production,.c-library-status--development,.c-library-status--placeholder{color:#fff;background:#f2a60d}.c-library-status--deprecated{color:#fff;background:#ce0058}.c-library__swatch-grid{margin-bottom:var(--space-m);grid-auto-rows:minmax(4em,auto);gap:0 1em;display:grid}@media only screen and (min-width:680px){.c-library__swatch-grid{grid-template-rows:5em auto;grid-template-columns:repeat(5,auto);gap:0}}.c-library__swatch-grid--has-labels{grid-auto-flow:row}@media only screen and (min-width:40em){.c-library__swatch-grid--has-labels{grid-template-rows:auto;grid-template-columns:minmax(15%,15em) auto}}@media only screen and (min-width:1000px){.c-library__swatch-grid--has-labels{grid-template-rows:5em auto;grid-template-columns:repeat(5,1fr);grid-auto-flow:column}}.c-library__swatches,.c-library__swatch-labels{grid-template-columns:repeat(auto-fit,165px);display:grid}.c-library__swatch{display:flex}.c-library__swatch>*{justify-content:center;margin:auto;font-weight:700}.c-library__swatches>*{height:0;padding-bottom:50%;position:relative}.c-library__swatches>*>*{text-align:center;height:100%;width:100%;justify-content:center;align-items:center;padding:.5rem;font-weight:700;display:flex;position:absolute;top:0;left:0}.c-library__swatch-grid table{letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2)}.c-library__swatch-grid table td,.c-library__swatch-grid table th{padding:9px 0 9px 4.5px;padding:var(--space-2xs)0 var(--space-2xs)var(--space-3xs)}.c-library__swatch-grid table th{width:3em}.c-library__swatch-grid table td{font-family:monospace}.c-library__image-row{max-width:100%;display:flex}.c-library__image-row img{object-fit:contain;width:6%;flex:auto;margin:0 2% 0 0}.c-library__image-row img:last-child{margin-right:0}.c-library__space{display:block}.c-library__space span{height:0;background:linear-gradient(45deg,#fff3 0%,#fff0 100%),#ce005880;padding-bottom:100%;display:block;position:relative}.c-library__space code{margin-left:18px;margin-left:var(--space-s);white-space:nowrap;line-height:1;position:absolute;top:50%;left:100%;transform:translateY(-50%)}.c-library-grid{color:#fff;letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);background:#00758c;justify-content:center;align-items:center;padding:3rem 1rem;display:flex}.c-library-grid--alt{background:#3d7b87;padding:2rem 1rem}.c-library-grid--alt:before{content:" ";display:block}.c-library-grid--first{background:#005461;padding:2rem 1rem}.c-library-grid--first:before{content:"First on mobile"}.c-library-copy{position:relative}.c-library-copy__trigger{letter-spacing:-.01em;font-size:15px;font-weight:700;font-size:var(--step--1);padding:4.5px 9px;padding:var(--space-3xs)var(--space-2xs);letter-spacing:.02em;background:#bfd3d6;position:absolute;bottom:0;right:0}.c-library-copy__trigger:hover{color:#ce0058}.c-library__typo__sidebar{width:14.2857%}.c-library__typo__sidebar span{display:block}.c-library__typo__sidebar .x2{height:2em;border:1px solid #333;border-width:1px 0;margin-top:4.25em;line-height:2em}.c-library__typo__main{width:82.8572%}.c-library__semi{font-weight:600}.c-library__photo-grid{margin-top:54px;margin-top:var(--space-xl);grid-template-columns:1fr;gap:2px;display:grid}@media only screen and (min-width:880px){.c-library__photo-grid{grid-auto-flow:dense;grid-auto-rows:auto}.c-library__photo-grid img{height:100%;width:100%;object-fit:cover}.c-library__photo-grid div{grid-area:1/1/2/3;display:flex}.c-library__photo-grid div h2{margin:auto var(--space-s)}.c-library__photo-grid.grid-1{grid-template-columns:40% 20% 40%;grid-template-rows:var(--space-2xl)400px 400px}.c-library__photo-grid.grid-1 img:nth-child(2){grid-area:2/1/3/3}.c-library__photo-grid.grid-1 img:nth-child(3){grid-area:1/3/3/4}.c-library__photo-grid.grid-1 img:nth-child(5){grid-column:2/4}.c-library__photo-grid.grid-2{grid-template-columns:50% 50%;grid-template-rows:var(--space-2xl)300px 300px}.c-library__photo-grid.grid-2 div{grid-column:1/2}.c-library__photo-grid.grid-2 img:nth-child(2){grid-row:2/4}.c-library__photo-grid.grid-2 img:nth-child(3){grid-row:1/3}}.c-library__illustration-grid{gap:var(--gutter);grid-template-columns:repeat(auto-fill,minmax(260px,1fr));display:grid}.c-library__illustration-grid :nth-child(2n+1):nth-last-child(3){grid-column:1/-1}.c-library .c-alert ul li{margin-left:1em;padding-left:.5rem;list-style:outside url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"20\" viewBox=\"0 0 10 20\"><circle cx=\"5\" cy=\"14\" r=\"3.5\" fill=\"%2313AA13\" fill-rule=\"evenodd\"/></svg>")}.c-library .c-alert ul li h3,.c-library .c-alert ul li h4{color:#13aa13;font-size:1em;line-height:1.6}@media only screen and (max-width:1050px){.c-library__logo-name span:nth-last-child(3),.c-library__logo-name span:nth-last-child(1){letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2)}.c-library__logo-name span:nth-last-child(2){letter-spacing:-.02em;font-size:21.6px;font-size:var(--step-1)}.c-library__header nav li:last-child{display:none}}@media only screen and (min-width:650px) and (max-width:700px),screen and (max-width:450px){.c-library__header nav .u-row{gap:9px;gap:var(--space-2xs);letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2)}}@media only screen and (max-width:650px){.c-library__header nav a{padding:9px 0;padding:var(--space-2xs)0;display:block}.c-library__header .c-library-page-active:after{bottom:4.5px;bottom:var(--space-3xs)}}
 /*# sourceMappingURL=library.css.map */

package/dist/build/scss/library.css.map

@@ -1 +1 @@
-{"mappings":"A,gFEcA,6NC2BA,8GAIA,4GAIA,8FAIA,8GCoDA,mMAWA,qCACE,uDAKF,2nDAWA,6NASA,+NASA,uNCrIA,88EAkCA,mCACE,gDEpDF,uCAMA,iHASA,4BAIA,+CASA,sDAOA,gEAWA,gBAYA,8LAIA,sCAaA,wBAIA,uBAIA,uCAQA,8BAOA,+BAOA,+JAcA,gEAMA,qBAIA,oCAOA,uCACE,qFC1IF,yRAuBA,yKAgBA,oFAMA,0FAMA,yEAMA,yCAIA,4BAIA,+BAIA,iDAQA,6BAIA,mEAgBA,gCAIA,6BAIA,8BAIA,6BAIA,6BAIA,4BAIA,8BAIA,6BAIA,yDAUA,8BAIA,6BAIA,4BAIA,8BAIA,4BAIA,8BAIA,wDAQA,8CAQA,8BAIA,4BAIA,4BAIA,yBAIA,0BAIA,yCCvMA,8KAQA,2CAIA,iDAIA,mCCQA,gIAQE,0DAMA,+CAIA,2CAIA,oEAME,wBACE,qFAIE,+DAIA,gDAQJ,wBACE,0FAIE,oEAIA,qDAQJ,kDACE,uFAIE,iEAIA,kDAMJ,wBACE,gGAIE,iEAIA,kDAQJ,kDACE,4FAIE,sEAIA,uDAMJ,wBACE,qGAIE,sEAIA,uDAQJ,kDACE,sFAIE,gEAIA,iDAMJ,wBACE,uFAIE,gEAIA,iDAQJ,6BADF,kWASI,qIAQA,4DAMJ,wBACE,oFAKA,6aAeA,kfAiBA,kcAgBA,0JAOA,gDAIA,sGASA,4CAIA,yCAIA,6BAIA,+GAKA,iHAMF,wBACE,mSAWA,oSThTJ,0EAKE,mDAIA,iNAUE,yCAVF,0HAgBE,0CAhBF,sIAqBE,wDAIA,4DAGE,oIAWJ,6GAKA,2DAIE,yCAJF,iDAQE,yCARF,iDAaA,yCACE,4GAMF,oJAME,yCANF,mCAUE,yCAVF,mFAcE,0GAIA,yCAIA,uCAGE,uEAMF,uEAIA,kFAIE,2EAMJ,6DAGE,yCAHF,oCAQA,sGAOE,yCAPF,6CAWE,2KAME,yCAGE,oNAQA,wHAKA,2DAON,kDAIA,0EAIA,2FAIA,yLAaA,yDAIE,kFAQF,6DAMA,iCAGE,yCAHF,oCAQA,+CAIE,2GAME,2MASF,6DAKA,4GAOE,yCAPF,4CAaF,4CAIA,kIAOE,yDAKF,+FAKA,0JAOE,uDAKA,6HAOA,4DAMF,4GAME,yCANF,gGAaA,+GAKE,0CALF,2HAYA,yGAMA,gCAGE,wEAQA,qEAKE,sLAgBJ,8FAGE,qJAIA,2CAGA,uDAKF,kDAIE,gFAME,oDAMJ,gCAGE,oJAQA,mKAWF,qLASE,0DAIE,uDAMF,4DAIE,wDAMJ,kCAGE,6OAUE,6CAYF,yCAGE,6CAKA,oHASF,sCAKF,iCAIA,iHAME,yCANF,gEAUI,mEAMA,0DAKE,yDAKF,+GAKI,iEAKA,iEAKA,+DAMJ,2GAIE,kDAKE,4DAGA,6DASR,+RAKE,sGAUJ,0CACE,0JAKA,4GAIA,mDAKF,4FAEE,4HAOA,yCACE,+EAKA","sources":["scss/library.css","src/assets/scss/library.scss","src/assets/scss/tools/breakout.scss","src/assets/scss/tools/cutoff.scss","src/assets/scss/foundations/typography.scss","src/assets/scss/foundations/space.scss","src/assets/scss/tools/index.scss","src/assets/scss/elements/reset.scss","src/assets/scss/objects/syntax-highlighting.scss","src/assets/scss/utilities/hr.scss","src/assets/scss/objects/grid.scss"],"sourcesContent":["@import \"https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap\";\n.u-breakout {\n  left: 50%;\n  left: calc(50% + var(--scrollbarWidth)  / 2.0001);\n  width: 100vw;\n  width: calc(100vw - var(--scrollbarWidth) );\n  padding-left: safe-space(0);\n  padding-right: safe-space(0);\n  position: relative;\n  transform: translateX(-50vw);\n}\n\n.u-cutoff {\n  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--gutter) ), calc(100% - var(--gutter) ) 100%, 0 100%);\n}\n\n.u-cutoff--top-right {\n  clip-path: polygon(0 0, calc(100% - var(--gutter) ) 0, 100% var(--gutter), 100% 100%, 0 100%);\n}\n\n.u-cutoff--top-left {\n  clip-path: polygon(var(--gutter) 0, 100% 0, 100% 100%, 0 100%, 0 var(--gutter) );\n}\n\n.u-cutoff--bottom-left {\n  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--gutter) 100%, 0 calc(100% - var(--gutter) ) );\n}\n\n:root {\n  --fluid-min-width: 320;\n  --fluid-max-width: 1332;\n  --fluid-screen: 100vw;\n  --fluid-bp: calc( (var(--fluid-screen)  - var(--fluid-min-width)  / 16 * 1rem)  / (var(--fluid-max-width)  - var(--fluid-min-width) ) );\n}\n\n@media screen and (min-width: 1332px) {\n  :root {\n    --fluid-screen: calc(var(--fluid-max-width)  * 1px);\n  }\n}\n\n:root {\n  --f--2-min: 12.64;\n  --f--2-max: 12.5;\n  --step--2: calc( ((var(--f--2-min)  / 16)  * 1rem)  + (var(--f--2-max)  - var(--f--2-min) )  * var(--fluid-bp) );\n  --f--1-min: 14.22;\n  --f--1-max: 15;\n  --step--1: calc( ((var(--f--1-min)  / 16)  * 1rem)  + (var(--f--1-max)  - var(--f--1-min) )  * var(--fluid-bp) );\n  --f-0-min: 16;\n  --f-0-max: 18;\n  --step-0: calc( ((var(--f-0-min)  / 16)  * 1rem)  + (var(--f-0-max)  - var(--f-0-min) )  * var(--fluid-bp) );\n  --f-1-min: 18;\n  --f-1-max: 21.6;\n  --step-1: calc( ((var(--f-1-min)  / 16)  * 1rem)  + (var(--f-1-max)  - var(--f-1-min) )  * var(--fluid-bp) );\n  --f-2-min: 20.25;\n  --f-2-max: 25.92;\n  --step-2: calc( ((var(--f-2-min)  / 16)  * 1rem)  + (var(--f-2-max)  - var(--f-2-min) )  * var(--fluid-bp) );\n  --f-3-min: 22.78;\n  --f-3-max: 31.1;\n  --step-3: calc( ((var(--f-3-min)  / 16)  * 1rem)  + (var(--f-3-max)  - var(--f-3-min) )  * var(--fluid-bp) );\n  --f-4-min: 25.63;\n  --f-4-max: 37.32;\n  --step-4: calc( ((var(--f-4-min)  / 16)  * 1rem)  + (var(--f-4-max)  - var(--f-4-min) )  * var(--fluid-bp) );\n  --f-5-min: 28.83;\n  --f-5-max: 44.79;\n  --step-5: calc( ((var(--f-5-min)  / 16)  * 1rem)  + (var(--f-5-max)  - var(--f-5-min) )  * var(--fluid-bp) );\n  --f-6-min: 32.44;\n  --f-6-max: 53.75;\n  --step-6: calc( ((var(--f-6-min)  / 16)  * 1rem)  + (var(--f-6-max)  - var(--f-6-min) )  * var(--fluid-bp) );\n  --f-7-min: 36.49;\n  --f-7-max: 64.5;\n  --step-7: calc( ((var(--f-7-min)  / 16)  * 1rem)  + (var(--f-7-max)  - var(--f-7-min) )  * var(--fluid-bp) );\n  --f-8-min: 41.05;\n  --f-8-max: 77.4;\n  --step-8: calc( ((var(--f-8-min)  / 16)  * 1rem)  + (var(--f-8-max)  - var(--f-8-min) )  * var(--fluid-bp) );\n  --f-9-min: 46.18;\n  --f-9-max: 92.88;\n  --step-9: calc( ((var(--f-9-min)  / 16)  * 1rem)  + (var(--f-9-max)  - var(--f-9-min) )  * var(--fluid-bp) );\n  --f-10-min: 51.96;\n  --f-10-max: 111.45;\n  --step-10: calc( ((var(--f-10-min)  / 16)  * 1rem)  + (var(--f-10-max)  - var(--f-10-min) )  * var(--fluid-bp) );\n}\n\n@font-face {\n  font-family: Inter;\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"../Inter-Regular.ed77b881.woff2\") format(\"woff2\"), url(\"../Inter-Regular.ca6858d7.woff\") format(\"woff\");\n}\n\n@font-face {\n  font-family: Inter;\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url(\"../Inter-SemiBold.dd034768.woff2\") format(\"woff2\"), url(\"../Inter-SemiBold.cc1168df.woff\") format(\"woff\");\n}\n\n@font-face {\n  font-family: Inter;\n  font-style: normal;\n  font-weight: 700;\n  font-display: swap;\n  src: url(\"../Inter-Bold.af5441a3.woff2\") format(\"woff2\"), url(\"../Inter-Bold.419e8c71.woff\") format(\"woff\");\n}\n\n:root {\n  --max-screen: 83.25;\n  --fc-screen: 100vw;\n  --fc-bp: calc((var(--fc-screen)  - 20em)  / (var(--max-screen)  - 20) );\n  --fc-base: 18;\n  --fc-3xs: 4.5;\n  --space-3xs: calc(var(--fc-3xs)  / 16 * 1rem);\n  --fc-2xs: 9;\n  --space-2xs: calc(var(--fc-2xs)  / 16 * 1rem);\n  --fc-xs: 13.5;\n  --space-xs: calc(var(--fc-xs)  / 16 * 1rem);\n  --fc-s: 18;\n  --space-s: calc(var(--fc-s)  / 16 * 1rem);\n  --fc-m: 27;\n  --space-m: calc(var(--fc-m)  / 16 * 1rem);\n  --fc-l: 36;\n  --space-l: calc(var(--fc-l)  / 16 * 1rem);\n  --fc-xl: 54;\n  --space-xl: calc(var(--fc-xl)  / 16 * 1rem);\n  --fc-2xl: 72;\n  --space-2xl: calc(var(--fc-2xl)  / 16 * 1rem);\n  --fc-3xl: 108;\n  --space-3xl: calc(var(--fc-3xl)  / 16 * 1rem);\n  --fc-4xl: 144;\n  --space-4xl: calc(var(--fc-4xl)  / 16 * 1rem);\n  --space--3xs: calc( ((var(--fc-)  / 16)  * 1rem)  + (var(--fc-3xs)  - var(--fc-) )  * var(--fluid-bp) );\n  --space-3xs-2xs: calc( ((var(--fc-3xs)  / 16)  * 1rem)  + (var(--fc-2xs)  - var(--fc-3xs) )  * var(--fluid-bp) );\n  --space-2xs-xs: calc( ((var(--fc-2xs)  / 16)  * 1rem)  + (var(--fc-xs)  - var(--fc-2xs) )  * var(--fluid-bp) );\n  --space-xs-s: calc( ((var(--fc-xs)  / 16)  * 1rem)  + (var(--fc-s)  - var(--fc-xs) )  * var(--fluid-bp) );\n  --space-s-m: calc( ((var(--fc-s)  / 16)  * 1rem)  + (var(--fc-m)  - var(--fc-s) )  * var(--fluid-bp) );\n  --space-m-l: calc( ((var(--fc-m)  / 16)  * 1rem)  + (var(--fc-l)  - var(--fc-m) )  * var(--fluid-bp) );\n  --space-l-xl: calc( ((var(--fc-l)  / 16)  * 1rem)  + (var(--fc-xl)  - var(--fc-l) )  * var(--fluid-bp) );\n  --space-xl-2xl: calc( ((var(--fc-xl)  / 16)  * 1rem)  + (var(--fc-2xl)  - var(--fc-xl) )  * var(--fluid-bp) );\n  --space-2xl-3xl: calc( ((var(--fc-2xl)  / 16)  * 1rem)  + (var(--fc-3xl)  - var(--fc-2xl) )  * var(--fluid-bp) );\n  --space-3xl-4xl: calc( ((var(--fc-3xl)  / 16)  * 1rem)  + (var(--fc-4xl)  - var(--fc-3xl) )  * var(--fluid-bp) );\n  --space-s-l: calc( ((var(--fc-s)  / 16)  * 1rem)  + (var(--fc-l)  - var(--fc-s) )  * var(--fluid-bp) );\n  --space-s-m: calc( ((var(--fc-s)  / 16)  * 1rem)  + (var(--fc-m)  - var(--fc-s) )  * var(--fluid-bp) );\n  --space-xs-l: calc( ((var(--fc-xs)  / 16)  * 1rem)  + (var(--fc-l)  - var(--fc-xs) )  * var(--fluid-bp) );\n  --space-m-xl: calc( ((var(--fc-m)  / 16)  * 1rem)  + (var(--fc-xl)  - var(--fc-m) )  * var(--fluid-bp) );\n  --space-l-2xl: calc( ((var(--fc-l)  / 16)  * 1rem)  + (var(--fc-2xl)  - var(--fc-l) )  * var(--fluid-bp) );\n  --space-s-xl: calc( ((var(--fc-s)  / 16)  * 1rem)  + (var(--fc-xl)  - var(--fc-s) )  * var(--fluid-bp) );\n  --space-l-3xl: calc( ((var(--fc-l)  / 16)  * 1rem)  + (var(--fc-3xl)  - var(--fc-l) )  * var(--fluid-bp) );\n  --space-xl-3xl: calc( ((var(--fc-xl)  / 16)  * 1rem)  + (var(--fc-3xl)  - var(--fc-xl) )  * var(--fluid-bp) );\n  --space-l-4xl: calc( ((var(--fc-l)  / 16)  * 1rem)  + (var(--fc-4xl)  - var(--fc-l) )  * var(--fluid-bp) );\n  --space-3xs-m: calc( ((var(--fc-3xs)  / 16)  * 1rem)  + (var(--fc-m)  - var(--fc-3xs) )  * var(--fluid-bp) );\n  --gutter: var(--space-s-l);\n}\n\n@media screen and (min-width: 75em) {\n  :root {\n    --fc-screen: calc(var(--max-screen)  * 1rem);\n  }\n}\n\n*, :before, :after {\n  box-sizing: border-box;\n}\n\nbody {\n  min-height: 100vh;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  margin: 0;\n  display: flex;\n}\n\nhtml {\n  scroll-behavior: smooth;\n}\n\nblockquote, pre, ol, ul, figure {\n  margin: 0;\n  padding: 0;\n}\n\nimg {\n  max-width: 100%;\n  height: auto;\n  border: none;\n  display: block;\n}\n\narticle, aside, figure, footer, header, aside, main, nav {\n  display: block;\n}\n\niframe {\n  border: none;\n}\n\nbody {\n  letter-spacing: -.01em;\n  font: 400 18px / 1.2 Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;\n  font-size: var(--step-0);\n  color: #333;\n}\n\nh1, h2, h3, h4, h5, h6, p, ul, ol, dl {\n  margin: 0;\n}\n\nul, ol, p {\n  line-height: 1.2;\n}\n\na {\n  text-decoration: none;\n}\n\na, a:hover {\n  cursor: pointer;\n  color: inherit;\n}\n\n.mp ol, .mp ul {\n  list-style: none;\n}\n\ncite, address {\n  font-style: normal;\n}\n\n[type=\"submit\"], [type=\"button\"], button {\n  box-shadow: none;\n  appearance: none;\n  cursor: pointer;\n  color: inherit;\n  font: inherit;\n  background: none;\n  border: none;\n  border-radius: 0;\n  padding: 0;\n}\n\n[disabled], .mp.c-button[disabled] {\n  opacity: .5;\n  cursor: not-allowed;\n}\n\nlabel {\n  cursor: pointer;\n}\n\nfieldset {\n  border: none;\n  padding: .01em 0 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  * {\n    scroll-behavior: auto !important;\n    transition: none !important;\n    animation: none !important;\n  }\n}\n\ncode[class*=\"language-\"], pre[class*=\"language-\"] {\n  text-align: left;\n  white-space: pre;\n  word-spacing: normal;\n  word-break: normal;\n  word-wrap: normal;\n  color: #3d7b87;\n  tab-size: 4;\n  -webkit-hyphens: none;\n  hyphens: none;\n  background: #ebf1f2;\n  font-family: Source Code Pro, monospace;\n  font-size: 1rem;\n  line-height: 1.5em;\n}\n\ncode[class*=\"language-\"]::selection, pre[class*=\"language-\"]::selection, code[class*=\"language-\"] ::selection, pre[class*=\"language-\"] ::selection {\n  color: #263238;\n  background: #cceae7;\n}\n\n:not(pre) > code[class*=\"language-\"] {\n  white-space: normal;\n  border-radius: .2em;\n  padding: .1em;\n}\n\npre[class*=\"language-\"] {\n  padding: 18px;\n  padding: var(--space-s);\n  position: relative;\n  overflow: auto;\n}\n\n.language-css > code, .language-sass > code, .language-scss > code {\n  color: #f2a60d;\n}\n\n[class*=\"language-\"] .namespace {\n  opacity: .7;\n}\n\n.token.atrule {\n  color: #3d7b87;\n}\n\n.token.attr-name {\n  color: #00a2c2;\n}\n\n.token.attr-value, .token.attribute {\n  color: #13aa13;\n}\n\n.token.boolean {\n  color: #ce0058;\n}\n\n.token.builtin, .token.cdata, .token.char, .token.class {\n  color: #00a2c2;\n}\n\n.token.class-name {\n  color: #6182b8;\n}\n\n.token.comment {\n  color: #aabfc9;\n}\n\n.token.constant {\n  color: #3d7b87;\n}\n\n.token.deleted {\n  color: #ce0058;\n}\n\n.token.doctype {\n  color: #aabfc9;\n}\n\n.token.entity {\n  color: #ce0058;\n}\n\n.token.function {\n  color: #3d7b87;\n}\n\n.token.hexcode {\n  color: #f2a60d;\n}\n\n.token.id, .token.important {\n  color: #3d7b87;\n  font-weight: bold;\n}\n\n.token.inserted {\n  color: #00a2c2;\n}\n\n.token.keyword {\n  color: #3d7b87;\n}\n\n.token.number {\n  color: #f2a60d;\n}\n\n.token.operator {\n  color: #00a2c2;\n}\n\n.token.prolog {\n  color: #aabfc9;\n}\n\n.token.property {\n  color: #00a2c2;\n}\n\n.token.pseudo-class, .token.pseudo-element {\n  color: #13aa13;\n}\n\n.token.punctuation, .token.regex {\n  color: #00a2c2;\n}\n\n.token.selector {\n  color: #ce0058;\n}\n\n.token.string {\n  color: #13aa13;\n}\n\n.token.symbol {\n  color: #3d7b87;\n}\n\n.token.tag {\n  color: #005461;\n}\n\n.token.unit {\n  color: #f2a60d;\n}\n\n.token.url, .token.variable {\n  color: #ce0058;\n}\n\n.u-hr, .c-library hr, .o-prose hr {\n  padding-bottom: 27px;\n  padding-bottom: var(--space-m-xl);\n  margin: 0 0 27px;\n  margin-bottom: var(--space-m-xl);\n  border: none;\n  border-bottom: 1px solid #bfd3d6;\n}\n\n.u-border-top {\n  border-top: 1px solid #bfd3d6;\n}\n\n.u-border-bottom {\n  border-bottom: 1px solid #bfd3d6;\n}\n\n.u-border {\n  border: 1px solid #bfd3d6;\n}\n\n.o-grid {\n  margin-bottom: -18px;\n  margin-bottom: calc(-1 * var(--gutter) );\n  width: 100%;\n  flex-wrap: wrap;\n  justify-content: stretch;\n  display: flex;\n}\n\n.o-grid--float:after {\n  content: \" \";\n  clear: both;\n  display: table;\n}\n\n.o-grid--between {\n  justify-content: space-between;\n}\n\n.o-grid--no-height-match {\n  align-items: start;\n}\n\n.o-grid > * {\n  width: 100%;\n  margin-bottom: 18px;\n  margin-bottom: var(--gutter);\n}\n\n@media (min-width: 40em) {\n  .o-grid--of-two > * {\n    width: calc(50% - 9.1px);\n    width: calc(50% - 1 * var(--gutter)  / 2 - .1px);\n  }\n\n  .o-grid--of-two > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-two > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 55em) {\n  .o-grid--of-two-late > * {\n    width: calc(50% - 9.1px);\n    width: calc(50% - 1 * var(--gutter)  / 2 - .1px);\n  }\n\n  .o-grid--of-two-late > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-two-late > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 38em) and (max-width: 54.9375em) {\n  .o-grid--of-three > * {\n    width: calc(50% - 9.1px);\n    width: calc(50% - 1 * var(--gutter)  / 2 - .1px);\n  }\n\n  .o-grid--of-three > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-three > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 55em) {\n  .o-grid--of-three > * {\n    width: calc(33.333% - 12.1px);\n    width: calc(33.333% - 2 * var(--gutter)  / 3 - .1px);\n  }\n\n  .o-grid--of-three > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-three > :nth-child(3n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 38em) and (max-width: 67.9375em) {\n  .o-grid--of-three-late > * {\n    width: calc(50% - 9.1px);\n    width: calc(50% - 1 * var(--gutter)  / 2 - .1px);\n  }\n\n  .o-grid--of-three-late > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-three-late > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 68em) {\n  .o-grid--of-three-late > * {\n    width: calc(33.333% - 12.1px);\n    width: calc(33.333% - 2 * var(--gutter)  / 3 - .1px);\n  }\n\n  .o-grid--of-three-late > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-three-late > :nth-child(3n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 38em) and (max-width: 59.9375em) {\n  .o-grid--of-four > * {\n    width: calc(50% - 9.1px);\n    width: calc(50% - 1 * var(--gutter)  / 2 - .1px);\n  }\n\n  .o-grid--of-four > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-four > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 60em) {\n  .o-grid--of-four > * {\n    width: calc(25% - 13.6px);\n    width: calc(25% - 3 * var(--gutter)  / 4 - .1px);\n  }\n\n  .o-grid--of-four > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-four > :nth-child(4n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (max-width: 54.9375em) {\n  .o-grid--swipeable {\n    left: 50%;\n    left: calc(50% + var(--scrollbarWidth)  / 2.0001);\n    width: 100vw;\n    width: calc(100vw - var(--scrollbarWidth) );\n    padding-left: var(--gutter);\n    padding-right: var(--gutter);\n    scroll-snap-type: x mandatory;\n    scroll-padding: var(--gutter);\n    -webkit-overflow-scrolling: touch;\n    flex-wrap: nowrap;\n    position: relative;\n    overflow-x: scroll;\n    transform: translateX(-50vw);\n  }\n\n  .o-grid--swipeable > * {\n    max-width: 23em;\n    width: calc(85vw - var(--gutter)  * 2.333);\n    scroll-snap-align: start;\n    scroll-snap-stop: always;\n    flex: none;\n  }\n\n  .o-grid--swipeable > * + * {\n    margin-left: var(--gutter) !important;\n  }\n}\n\n@media (min-width: 55em) {\n  .o-grid--4\\/7 > :nth-child(2n+2), .o-grid--4\\/7-switch > :nth-child(2n+2) {\n    width: 57.1429%;\n  }\n\n  .o-grid--9\\/3 > :nth-child(2n+1), .o-grid--8\\/3 > :nth-child(2n+1), .o-grid--8\\/4 > :nth-child(2n+1), .o-grid--3\\/9 > :nth-child(2n+2), .o-grid--3\\/8 > :nth-child(2n+2), .o-grid--4\\/8 > :nth-child(2n+2), .o-grid--9\\/3-switch > :nth-child(2n+2), .o-grid--8\\/3-switch > :nth-child(2n+2), .o-grid--8\\/4-switch > :nth-child(2n+2), .o-grid--3\\/9-switch > :nth-child(2n+1), .o-grid--3\\/8-switch > :nth-child(2n+1), .o-grid--4\\/8-switch > :nth-child(2n+1) {\n    width: 65.7143%;\n  }\n\n  .o-grid--9\\/3 > :nth-child(2n+2), .o-grid--8\\/3 > :nth-child(2n+2), .o-grid--8\\/4 > :nth-child(2n+2), .o-grid--3\\/9 > :nth-child(2n+1), .o-grid--3\\/8 > :nth-child(2n+1), .o-grid--4\\/8 > :nth-child(2n+1), .o-grid--4\\/7 > :nth-child(2n+1), .o-grid--9\\/3-switch > :nth-child(2n+1), .o-grid--8\\/3-switch > :nth-child(2n+1), .o-grid--8\\/4-switch > :nth-child(2n+1), .o-grid--3\\/9-switch > :nth-child(2n+2), .o-grid--3\\/8-switch > :nth-child(2n+2), .o-grid--4\\/8-switch > :nth-child(2n+2), .o-grid--4\\/7-switch > :nth-child(2n+1) {\n    width: 31.4286%;\n  }\n\n  .o-grid--3\\/9 > :nth-child(2n+2), .o-grid--3\\/8 > :nth-child(2n+2), .o-grid--4\\/8 > :nth-child(2n+2), .o-grid--9\\/3 > :nth-child(2n+2), .o-grid--8\\/3 > :nth-child(2n+2), .o-grid--8\\/4 > :nth-child(2n+2), .o-grid--9\\/3-switch > :nth-child(2n+1), .o-grid--8\\/3-switch > :nth-child(2n+1), .o-grid--8\\/4-switch > :nth-child(2n+1), .o-grid--3\\/9-switch > :nth-child(2n+1), .o-grid--3\\/8-switch > :nth-child(2n+1), .o-grid--4\\/8-switch > :nth-child(2n+1) {\n    margin-left: 2.85714%;\n    margin-right: 0;\n  }\n\n  .o-grid--8\\/3 > :nth-child(2n+1), .o-grid--3\\/8 > :nth-child(2n+2), .o-grid--8\\/3-switch > :nth-child(2n+2), .o-grid--3\\/8-switch > :nth-child(2n+1) {\n    max-width: 828px;\n  }\n\n  .o-grid[class*=\"switch\"] > :nth-child(2n+1) {\n    order: 1;\n  }\n\n  .o-grid--layout, .o-grid--layout > :nth-last-child(1), .o-grid--layout > :nth-last-child(2) {\n    margin-bottom: 0;\n  }\n\n  .o-grid--push {\n    justify-content: space-between;\n  }\n\n  .o-grid--pull {\n    justify-content: flex-start;\n  }\n\n  .o-grid--float {\n    display: block;\n  }\n\n  .o-grid--float:not([class*=\"switch\"]) > :nth-child(2n+1), .o-grid--float[class*=\"switch\"] > :nth-child(2n+2) {\n    float: left;\n  }\n\n  .o-grid--float:not([class*=\"switch\"]) > :nth-child(2n+2), .o-grid--float[class*=\"switch\"] > :nth-child(2n+1) {\n    float: right;\n  }\n}\n\n@media (min-width: 70em) {\n  .o-grid--9\\/3 > :nth-child(2n+1), .o-grid--8\\/3 > :nth-child(2n+1), .o-grid--3\\/9 > :nth-child(2n+2), .o-grid--3\\/8 > :nth-child(2n+2), .o-grid--9\\/3-switch > :nth-child(2n+2), .o-grid--8\\/3-switch > :nth-child(2n+2), .o-grid--3\\/9-switch > :nth-child(2n+1), .o-grid--3\\/8-switch > :nth-child(2n+1) {\n    width: 74.2857%;\n  }\n\n  .o-grid--9\\/3 > :nth-child(2n+2), .o-grid--8\\/3 > :nth-child(2n+2), .o-grid--3\\/9 > :nth-child(2n+1), .o-grid--3\\/8 > :nth-child(2n+1), .o-grid--9\\/3-switch > :nth-child(2n+1), .o-grid--8\\/3-switch > :nth-child(2n+1), .o-grid--3\\/9-switch > :nth-child(2n+2), .o-grid--3\\/8-switch > :nth-child(2n+2) {\n    width: 22.8571%;\n  }\n}\n\n.c-library {\n  min-height: 100vh;\n  grid-template-rows: auto 1fr auto;\n  display: grid;\n}\n\n.c-library--components {\n  grid-template-rows: auto 1fr;\n}\n\n.c-library__header {\n  letter-spacing: -.01em;\n  font-size: 15px;\n  font-size: var(--step--1);\n  padding: 9px;\n  padding: var(--space-2xs);\n  color: #fff;\n  background: #005461;\n  flex-direction: column;\n  align-items: flex-start;\n  font-weight: 700;\n}\n\n@media only screen and (min-width: 650px) {\n  .c-library__header {\n    letter-spacing: -.01em;\n    font-size: 12.5px;\n    font-size: var(--step--2);\n    flex-direction: row;\n    align-items: center;\n  }\n}\n\n@media only screen and (min-width: 1000px) {\n  .c-library__header {\n    letter-spacing: -.01em;\n    font-size: 15px;\n    font-size: var(--step--1);\n    padding: 18px;\n    padding: var(--space-s) var(--space-s-l);\n  }\n}\n\n.c-library__header img {\n  filter: saturate(0) brightness(10);\n}\n\n.c-library__header .c-library-page-active {\n  position: relative;\n}\n\n.c-library__header .c-library-page-active:after {\n  content: \"\";\n  width: 100%;\n  border-bottom: 1px solid ;\n  position: absolute;\n  bottom: -6px;\n  left: 0;\n}\n\n.c-library__hero {\n  color: #fff;\n  background: linear-gradient(#005461, #0000), linear-gradient(45deg, #00a2c2, #005461);\n}\n\n.c-library__body {\n  grid-template-rows: auto auto;\n  display: grid;\n}\n\n@media only screen and (min-width: 600px) {\n  .c-library__body {\n    grid-template-columns: 10em 1fr;\n  }\n}\n\n@media only screen and (min-width: 800px) {\n  .c-library__body {\n    grid-template-columns: 17em 1fr;\n  }\n}\n\n@media only screen and (min-width: 600px) {\n  .c-library--components .c-library__body > * {\n    height: calc(100vh - var(--headerHeight)  - 1px);\n    overflow-y: scroll;\n  }\n}\n\n.c-library__sidebar {\n  letter-spacing: -.01em;\n  font-size: 12.5px;\n  font-size: var(--step--2);\n  scroll-behavior: none;\n  border-right: 1px solid #ebf1f2;\n  grid-row: -1;\n}\n\n@media only screen and (min-width: 600px) {\n  .c-library__sidebar {\n    grid-row: auto;\n  }\n}\n\n@media only screen and (min-width: 800px) {\n  .c-library__sidebar {\n    letter-spacing: -.01em;\n    font-size: 15px;\n    font-size: var(--step--1);\n  }\n}\n\n.c-library__sidebar > * {\n  padding: 18px;\n  padding: var(--space-s-l) var(--space-s) var(--space-s-l) var(--space-s-l);\n}\n\n.c-library__sidebar li {\n  position: relative;\n}\n\n.c-library__sidebar li a {\n  color: #006daf;\n}\n\n.c-library__sidebar li a:hover {\n  color: #006daf;\n  text-decoration: underline;\n}\n\n.c-library__sidebar li + li {\n  margin-top: 13.5px;\n  margin-top: var(--space-xs);\n}\n\n.c-library__sidebar ul ul {\n  padding: 13.5px;\n  padding: var(--space-xs);\n  padding-bottom: 0;\n}\n\n.c-library__sidebar ul ul li + li {\n  margin-top: 9px;\n  margin-top: var(--space-2xs);\n}\n\n.c-library__skip-link {\n  padding: 13.5px;\n  padding: var(--space-xs);\n}\n\n@media only screen and (min-width: 600px) {\n  .c-library__skip-link {\n    display: none;\n  }\n}\n\n.c-library__logo {\n  max-width: 15%;\n  min-width: 100px;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n@media only screen and (min-width: 650px) {\n  .c-library__logo {\n    justify-content: flex-start;\n  }\n}\n\n.c-library__logo-name {\n  padding-left: 13.5px;\n  padding-left: var(--space-xs-s);\n  margin-left: 13.5px;\n  margin-left: var(--space-xs-s);\n  white-space: nowrap;\n  border-left: 1px solid #3d7b87;\n}\n\n.c-library__logo-name span {\n  display: block;\n}\n\n.c-library__logo-name span:nth-last-child(3), .c-library__logo-name span:nth-last-child(1) {\n  text-transform: uppercase;\n  letter-spacing: -.01em;\n  font-size: 15px;\n  font-size: var(--step--1);\n  letter-spacing: .08em;\n  color: #bfd3d6;\n}\n\n.c-library__logo-name span:nth-last-child(2) {\n  color: #fff;\n  letter-spacing: -.03em;\n  font-size: 37.32px;\n  font-size: var(--step-4);\n}\n\n.c-library__logo-name span:nth-last-child(3) {\n  color: #3d7b87;\n}\n\n.has-js .c-library__sidebar ul > li > ul {\n  display: none;\n}\n\n.has-js .c-library__sidebar ul > .c-library-accordion-open > ul {\n  display: block;\n}\n\n.c-library .c-library-accordion-open > .c-library-accordion__toggle {\n  transform: rotate(180deg);\n}\n\n.c-library .c-library-accordion__toggle {\n  color: #006daf;\n  justify-content: center;\n  align-items: center;\n  padding: .25rem;\n  font-size: 1rem;\n  line-height: 1;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n\n.c-library-menu-active {\n  font-weight: 700;\n  position: relative;\n}\n\n.c-library-menu-active:before {\n  content: \"▸ \";\n  position: absolute;\n  top: 0;\n  left: -17px;\n}\n\n.c-library-stretch {\n  flex-direction: column;\n  flex: 1;\n  display: flex;\n}\n\n.c-library__main {\n  overflow-y: auto;\n}\n\n@media only screen and (min-width: 600px) {\n  .c-library__main {\n    overflow-y: scroll;\n  }\n}\n\n.c-library__frame {\n  width: 100%;\n  position: relative;\n}\n\n.c-library__frame-links {\n  right: 0;\n  top: calc(-1 * (var(--space-m)  + var(--space-s) ) );\n  z-index: 1;\n  position: absolute;\n}\n\n.c-library__frame-links a, .c-library__frame-links button {\n  letter-spacing: -.01em;\n  font-size: 15px;\n  font-size: var(--step--1);\n  color: #959595;\n  background: #bfd3d6;\n  border-radius: 0 0 .25em .25em;\n  padding: .25em .666em;\n}\n\n.c-library__frame-background {\n  border-radius: 0 0 0 .25em;\n  top: 0;\n}\n\n.c-library__frame iframe {\n  height: 100%;\n  width: 100%;\n  transition: all .3s cubic-bezier(.22, .61, .36, 1);\n  top: 0;\n  left: 0;\n}\n\n@media only screen and (min-width: 600px) {\n  .c-library__frame iframe {\n    position: absolute;\n  }\n}\n\n.c-library-code {\n  font-family: Source Code Pro;\n}\n\n.c-library-pre {\n  padding: 18px;\n  padding: var(--space-s);\n  background: #ebf1f2;\n  font-family: Source Code Pro;\n  line-height: 1.4;\n  overflow-x: auto;\n}\n\n.c-library-pre--bordered {\n  border-bottom: 1px solid #bfd3d6;\n}\n\n.c-library-version {\n  letter-spacing: -.01em;\n  font-size: 15px;\n  font-size: var(--step--1);\n  color: #959595;\n}\n\n.c-library-status {\n  letter-spacing: -.01em;\n  font-size: 15px;\n  font-size: var(--step--1);\n  color: #959595;\n  background: #bfd3d6;\n  border-radius: .25em;\n  padding: .25em .666em;\n}\n\n.c-library-status--ready {\n  color: #fff;\n  background: #13aa13;\n}\n\n.c-library-status--in-production, .c-library-status--development, .c-library-status--placeholder {\n  color: #fff;\n  background: #f2a60d;\n}\n\n.c-library-status--deprecated {\n  color: #fff;\n  background: #ce0058;\n}\n\n.c-library__swatch-grid {\n  margin-bottom: var(--space-m);\n  grid-auto-rows: minmax(4em, auto);\n  gap: 0 1em;\n  display: grid;\n}\n\n@media only screen and (min-width: 680px) {\n  .c-library__swatch-grid {\n    grid-template-rows: 5em auto;\n    grid-template-columns: repeat(5, auto);\n    gap: 0;\n  }\n}\n\n.c-library__swatch-grid--has-labels {\n  grid-template-rows: auto;\n  grid-template-columns: 15em auto;\n  grid-auto-flow: row;\n}\n\n@media only screen and (min-width: 1000px) {\n  .c-library__swatch-grid--has-labels {\n    grid-template-rows: 5em auto;\n    grid-template-columns: repeat(5, 1fr);\n    grid-auto-flow: column;\n  }\n}\n\n.c-library__swatches, .c-library__swatch-labels {\n  grid-template-columns: repeat(auto-fit, 165px);\n  display: grid;\n}\n\n.c-library__swatch {\n  display: flex;\n}\n\n.c-library__swatch > * {\n  justify-content: center;\n  margin: auto;\n  font-weight: 700;\n}\n\n.c-library__swatches > * {\n  height: 0;\n  padding-bottom: 50%;\n  position: relative;\n}\n\n.c-library__swatches > * > * {\n  text-align: center;\n  height: 100%;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n  padding: .5rem;\n  font-weight: 700;\n  display: flex;\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\n.c-library__swatch-grid table {\n  letter-spacing: -.01em;\n  font-size: 12.5px;\n  font-size: var(--step--2);\n}\n\n.c-library__swatch-grid table td, .c-library__swatch-grid table th {\n  padding: 9px 0 9px 4.5px;\n  padding: var(--space-2xs) 0 var(--space-2xs) var(--space-3xs);\n}\n\n.c-library__swatch-grid table th {\n  width: 3em;\n}\n\n.c-library__swatch-grid table td {\n  font-family: monospace;\n}\n\n.c-library__image-row {\n  max-width: 100%;\n  display: flex;\n}\n\n.c-library__image-row img {\n  object-fit: contain;\n  width: 6%;\n  flex: auto;\n  margin: 0 2% 0 0;\n}\n\n.c-library__image-row img:last-child {\n  margin-right: 0;\n}\n\n.c-library__space {\n  display: block;\n}\n\n.c-library__space span {\n  height: 0;\n  background: linear-gradient(45deg, #fff3 0%, #fff0 100%), #ce005880;\n  padding-bottom: 100%;\n  display: block;\n  position: relative;\n}\n\n.c-library__space code {\n  margin-left: 18px;\n  margin-left: var(--space-s);\n  white-space: nowrap;\n  line-height: 1;\n  position: absolute;\n  top: 50%;\n  left: 100%;\n  transform: translateY(-50%);\n}\n\n.c-library-grid {\n  color: #fff;\n  letter-spacing: -.01em;\n  font-size: 15px;\n  font-size: var(--step--1);\n  background: #00758c;\n  justify-content: center;\n  align-items: center;\n  padding: 3rem 1rem;\n  display: flex;\n}\n\n.c-library-grid--alt {\n  background: #3d7b87;\n  padding: 2rem 1rem;\n}\n\n.c-library-grid--alt:before {\n  content: \" \";\n  display: block;\n}\n\n.c-library-grid--first {\n  background: #005461;\n  padding: 2rem 1rem;\n}\n\n.c-library-grid--first:before {\n  content: \"First on mobile\";\n}\n\n.c-library-copy {\n  position: relative;\n}\n\n.c-library-copy__trigger {\n  letter-spacing: -.01em;\n  font-size: 15px;\n  font-weight: 700;\n  font-size: var(--step--1);\n  padding: 4.5px 9px;\n  padding: var(--space-3xs) var(--space-2xs);\n  letter-spacing: .02em;\n  background: #bfd3d6;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n}\n\n.c-library-copy__trigger:hover {\n  color: #ce0058;\n}\n\n.c-library__typo__sidebar {\n  width: 14.2857%;\n}\n\n.c-library__typo__sidebar span {\n  display: block;\n}\n\n.c-library__typo__sidebar .x2 {\n  height: 2em;\n  border: 1px solid #333;\n  border-width: 1px 0;\n  margin-top: 4.25em;\n  line-height: 2em;\n}\n\n.c-library__typo__main {\n  width: 82.8572%;\n}\n\n.c-library__semi {\n  font-weight: 600;\n}\n\n.c-library__photo-grid {\n  margin-top: 54px;\n  margin-top: var(--space-xl);\n  grid-template-columns: 1fr;\n  gap: 2px;\n  display: grid;\n}\n\n@media only screen and (min-width: 880px) {\n  .c-library__photo-grid {\n    grid-auto-flow: dense;\n    grid-auto-rows: auto;\n  }\n\n  .c-library__photo-grid img {\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n  }\n\n  .c-library__photo-grid div {\n    grid-area: 1 / 1 / 2 / 3;\n    display: flex;\n  }\n\n  .c-library__photo-grid div h2 {\n    margin: auto var(--space-s);\n  }\n\n  .c-library__photo-grid.grid-1 {\n    grid-template-columns: 40% 20% 40%;\n    grid-template-rows: var(--space-2xl) 400px 400px;\n  }\n\n  .c-library__photo-grid.grid-1 img:nth-child(2) {\n    grid-area: 2 / 1 / 3 / 3;\n  }\n\n  .c-library__photo-grid.grid-1 img:nth-child(3) {\n    grid-area: 1 / 3 / 3 / 4;\n  }\n\n  .c-library__photo-grid.grid-1 img:nth-child(5) {\n    grid-column: 2 / 4;\n  }\n\n  .c-library__photo-grid.grid-2 {\n    grid-template-columns: 50% 50%;\n    grid-template-rows: var(--space-2xl) 300px 300px;\n  }\n\n  .c-library__photo-grid.grid-2 div {\n    grid-column: 1 / 2;\n  }\n\n  .c-library__photo-grid.grid-2 img:nth-child(2) {\n    grid-row: 2 / 4;\n  }\n\n  .c-library__photo-grid.grid-2 img:nth-child(3) {\n    grid-row: 1 / 3;\n  }\n}\n\n.c-library .c-alert ul li {\n  margin-left: 1em;\n  padding-left: .5rem;\n  list-style: outside url(\"data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"8\\\" height=\\\"20\\\" viewBox=\\\"0 0 10 20\\\"><circle cx=\\\"5\\\" cy=\\\"14\\\" r=\\\"3.5\\\" fill=\\\"%2313AA13\\\" fill-rule=\\\"evenodd\\\"/></svg>\");\n}\n\n.c-library .c-alert ul li h3, .c-library .c-alert ul li h4 {\n  color: #13aa13;\n  font-size: 1em;\n  line-height: 1.6;\n}\n\n@media only screen and (max-width: 1050px) {\n  .c-library__logo-name span:nth-last-child(3), .c-library__logo-name span:nth-last-child(1) {\n    letter-spacing: -.01em;\n    font-size: 12.5px;\n    font-size: var(--step--2);\n  }\n\n  .c-library__logo-name span:nth-last-child(2) {\n    letter-spacing: -.02em;\n    font-size: 21.6px;\n    font-size: var(--step-1);\n  }\n\n  .c-library__header nav li:last-child {\n    display: none;\n  }\n}\n\n@media only screen and (min-width: 650px) and (max-width: 700px), screen and (max-width: 450px) {\n  .c-library__header nav .u-row {\n    gap: 9px;\n    gap: var(--space-2xs);\n    letter-spacing: -.01em;\n    font-size: 12.5px;\n    font-size: var(--step--2);\n  }\n}\n\n@media only screen and (max-width: 650px) {\n  .c-library__header nav a {\n    padding: 9px 0;\n    padding: var(--space-2xs) 0;\n    display: block;\n  }\n\n  .c-library__header .c-library-page-active:after {\n    bottom: 4.5px;\n    bottom: var(--space-3xs);\n  }\n}\n\n/*# sourceMappingURL=library.css.map */\n","@import './tools';\r\n@import './foundations';\r\n@import './elements/reset';\r\n@import './objects/syntax-highlighting';\r\n@import './utilities/hr.scss';\r\n@import './objects/grid';\r\n\r\n@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');\r\n\r\n.c-library {\r\n  display: grid;\r\n  min-height: 100vh;\r\n  grid-template-rows: auto 1fr auto;\r\n  \r\n  &--components {\r\n    grid-template-rows: auto 1fr;\r\n  }\r\n\r\n  &__header {\r\n    @include step(-1);\r\n    @include padding('2xs');\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    \r\n    background: color('petrol');\r\n    color: color('white');\r\n    font-weight: weight('bold');\r\n    \r\n    @media only screen and (min-width:650px) {\r\n      @include step(-2);\r\n      flex-direction: row;\r\n      align-items: center;\r\n    }\r\n\r\n    @media only screen and (min-width:1000px) {\r\n      @include step(-1);\r\n      @include padding('s', 's-l');\r\n    }\r\n\r\n    img {\r\n      filter: saturate(0) brightness(10);\r\n    }\r\n\r\n    .c-library-page-active {\r\n      position: relative;\r\n\r\n      &:after {\r\n        content: '';\r\n        position: absolute;\r\n        left: 0;\r\n        width: 100%;\r\n        bottom: -6px;\r\n        border-bottom: 1px solid;\r\n      }\r\n    }\r\n  }\r\n\r\n  &__hero {\r\n    color: white;\r\n    background: linear-gradient(color('petrol'), transparent), linear-gradient(45deg, color('blue'), color('petrol'));\r\n  }\r\n\r\n  &__body {\r\n    display: grid;\r\n    grid-template-rows: auto auto;\r\n\r\n    @media only screen and (min-width: 600px) {\r\n      grid-template-columns: 10em 1fr;\r\n    }\r\n    \r\n    @media only screen and (min-width: 800px) {\r\n      grid-template-columns: 17em 1fr;\r\n    }\r\n  }\r\n\r\n  @media only screen and (min-width: 600px) {\r\n    &--components &__body > * {\r\n      overflow-y: scroll;\r\n      height: calc( 100vh - var(--headerHeight) - 1px );\r\n    }\r\n  }\r\n\r\n  &__sidebar {\r\n    @include step(-2);\r\n    border-right: 1px solid color('petrol', 'step-3');\r\n    grid-row: -1;\r\n    scroll-behavior: none;\r\n  \r\n    @media only screen and (min-width: 600px) {\r\n      grid-row: auto;\r\n    }\r\n\r\n    @media only screen and (min-width: 800px) {\r\n      @include step(-1);\r\n    }\r\n\r\n    & > * {\r\n      @include padding('s-l', 's', 's-l', 's-l');\r\n    }\r\n\r\n    li {\r\n      position: relative;\r\n    }\r\n\r\n    li a {\r\n      color: color('utility-blue');\r\n\r\n      &:hover {\r\n        text-decoration: underline;\r\n        color: color('utility-blue');\r\n      }\r\n    }\r\n\r\n    li + li {\r\n      @include margin-top('xs');\r\n    }\r\n\r\n    ul ul {\r\n      @include padding('xs');\r\n      padding-bottom: 0;\r\n\r\n      li + li  {\r\n        @include margin-top('2xs');\r\n      }\r\n    }\r\n  }\r\n\r\n  &__skip-link {\r\n    @include padding('xs');\r\n    \r\n    @media only screen and (min-width: 600px) {\r\n      display: none;\r\n    }\r\n  }\r\n\r\n  &__logo {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    max-width: 15%;\r\n    min-width: 100px;\r\n\r\n    @media only screen and (min-width:650px) {\r\n      justify-content: flex-start;\r\n    }\r\n    \r\n    &-name {\r\n      @include padding-left('xs-s');\r\n      @include margin-left('xs-s');\r\n      border-left: 1px solid color('petrol', 'step-1');\r\n      white-space: nowrap;\r\n\r\n      span {\r\n        display: block;\r\n\r\n        &:nth-last-child(3),\r\n        &:nth-last-child(1) {\r\n          text-transform: uppercase;\r\n          @include step(-1);\r\n          letter-spacing: 0.08em;\r\n          color: color('petrol', 'step-2');\r\n        }\r\n\r\n        &:nth-last-child(2) {\r\n          color: color('white');\r\n          @include step(4);\r\n        }\r\n\r\n        &:nth-last-child(3) {\r\n          color: color('petrol', 'step-1');\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .has-js &__sidebar ul > li > ul {\r\n    display: none;\r\n  }\r\n\r\n  .has-js &__sidebar ul > .c-library-accordion-open > ul {\r\n    display: block;\r\n  }\r\n\r\n  .c-library-accordion-open > .c-library-accordion__toggle {\r\n    transform: rotate(180deg);\r\n  }\r\n\r\n  .c-library-accordion__toggle {\r\n    color: color('utility-blue');\r\n    line-height: 1;\r\n    font-size: 1rem;\r\n    position: absolute;\r\n    right: 0;\r\n    top: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 0.25rem;\r\n  }\r\n\r\n  &-menu-active  {\r\n    font-weight: weight('bold');\r\n    position: relative;\r\n\r\n    &::before {\r\n      content: '▸ ';\r\n      position: absolute;\r\n      left: -17px;\r\n      top: 0;\r\n    }\r\n  }\r\n\r\n  &-stretch {\r\n    display: flex;\r\n    flex-direction: column;\r\n    flex: 1;\r\n  }\r\n\r\n  &__main {\r\n    overflow-y: auto;\r\n\r\n    @media only screen and (min-width: 600px) {\r\n      overflow-y: scroll;\r\n    }\r\n  }\r\n\r\n  &__frame {\r\n    position: relative;\r\n    width: 100%;\r\n    \r\n    &-links {\r\n      position: absolute;\r\n      right: 0;\r\n      top: calc(-1 * (var(--space-m) + var(--space-s)));\r\n      z-index: 1;\r\n\r\n      a, button {\r\n        border-radius: 0 0 0.25em 0.25em;\r\n        @include step(-1);\r\n        padding: 0.25em 0.666em;\r\n        background: color('petrol', 'step-2');\r\n        color: color('grey', 'step-1');\r\n      }\r\n    }\r\n\r\n    &-background {\r\n      border-radius: 0 0 0 0.25em;\r\n      top: 0;\r\n    }\r\n\r\n    iframe {\r\n      height: 100%;\r\n      width: 100%;\r\n      left: 0;\r\n      top: 0;\r\n      transition: all .3s cubic-bezier(0.22, 0.61, 0.36, 1);\r\n\r\n      @media only screen and (min-width: 600px) {\r\n        position: absolute;\r\n      }\r\n    }\r\n  }\r\n\r\n  &-code {\r\n    font-family: 'Source Code Pro';\r\n  }\r\n\r\n  &-pre {\r\n    overflow-x: auto;\r\n    background: color('petrol', 'step-3');\r\n    @include padding('s');\r\n    font-family: 'Source Code Pro';\r\n    line-height: 1.4;\r\n\r\n    &--bordered {\r\n      border-bottom: 1px solid color('petrol', 'step-2');\r\n    }\r\n  }\r\n\r\n  &-version {\r\n    @include step(-1);\r\n    color: color('grey', 'step-1');\r\n  }\r\n\r\n  &-status {\r\n    @include step(-1);\r\n    padding: 0.25em 0.666em;\r\n    border-radius: 0.25em;\r\n    background: color('petrol', 'step-2');\r\n    color: color('grey', 'step-1');\r\n\r\n    &--ready {\r\n      background: color('green');\r\n      color: color('white');\r\n    }\r\n\r\n    &--in-production,\r\n    &--development,\r\n    &--placeholder {\r\n      background: color('utility-orange');\r\n      color: color('white');\r\n    }\r\n\r\n    &--deprecated {\r\n      background: color('red');\r\n      color: color('white');\r\n    }\r\n  }\r\n\r\n  &__swatch-grid {\r\n    display: grid;\r\n    gap: 0 1em;\r\n    grid-auto-rows: minmax(4em, auto);\r\n    margin-bottom: var(--space-m);\r\n    \r\n    @media only screen and (min-width: 680px) {\r\n      gap: 0;\r\n      grid-template-columns: repeat(5, auto);\r\n      grid-template-rows: 5em auto;\r\n    }\r\n  }\r\n  \r\n  &__swatch-grid--has-labels {\r\n    grid-template-columns: 15em auto;\r\n    grid-template-rows: auto;\r\n    grid-auto-flow: row;\r\n    \r\n    @media only screen and (min-width:1000px) {\r\n      grid-auto-flow: column;\r\n      grid-template-columns: repeat(5, 1fr);\r\n      grid-template-rows: 5em auto;\r\n    }\r\n  }\r\n  \r\n  &__swatches,\r\n  &__swatch-labels {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, 165px);\r\n  }\r\n  \r\n  &__swatch {\r\n    display: flex;\r\n    \r\n    & > * {\r\n      justify-content: center;\r\n      font-weight: weight('bold');\r\n      margin: auto;\r\n    }\r\n  }\r\n  \r\n  &__swatches {\r\n    & > * {\r\n      height: 0;\r\n      padding-bottom: 50%;\r\n      position: relative;\r\n      \r\n      & > * {\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        padding: 0.5rem;\r\n        font-weight: weight('bold');\r\n        text-align: center;\r\n        position: absolute;\r\n        height: 100%;\r\n        width: 100%;\r\n        left: 0;\r\n        top: 0;\r\n      }\r\n    }\r\n  }\r\n  \r\n  &__swatch-grid table {\r\n    @include step(-2);\r\n    \r\n    td,\r\n    th {\r\n      @include padding('2xs', 0, '2xs', '3xs');\r\n    }\r\n    th {\r\n      widtH: 3em;\r\n    }\r\n    td {\r\n      font-family: monospace;\r\n    }\r\n  }\r\n\r\n  &__image-row {\r\n    display: flex;\r\n    max-width: 100%;\r\n\r\n    img {\r\n      flex: 1 1 auto;\r\n      margin: 0 2% 0 0;\r\n      object-fit: contain;\r\n      width: 6%;\r\n\r\n      &:last-child {\r\n        margin-right: 0;\r\n      }\r\n    }\r\n  }\r\n\r\n  &__space {\r\n    display: block;\r\n\r\n    span {\r\n      background: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), rgba(206, 0, 88, 0.5);\r\n      height: 0;\r\n      padding-bottom: 100%;\r\n      position: relative;\r\n      display: block;\r\n    }\r\n\r\n    code {\r\n      position: absolute;\r\n      line-height: 1;\r\n      left: 100%;\r\n      top: 50%;\r\n      @include margin-left('s');\r\n      white-space: nowrap;\r\n      transform: translateY(-50%);\r\n    }\r\n  }\r\n\r\n  &-grid {\r\n    background: color('blue', 'step--1');\r\n    padding: 3rem 1rem;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    color: color('white');\r\n    @include step(-1);\r\n\r\n    &--alt {\r\n      background: color('petrol', 'step-1');\r\n      padding: 2rem 1rem;\r\n  \r\n      &:before {\r\n        content: '\\00a0';\r\n        display: block;\r\n      }\r\n    }\r\n\r\n    &--first {\r\n      background: color('petrol');\r\n      padding: 2rem 1rem;\r\n  \r\n      &:before {\r\n        content: 'First on mobile';\r\n      }\r\n    }\r\n  }\r\n\r\n  &-copy {\r\n    position: relative;\r\n\r\n    &__trigger {\r\n      position: absolute;\r\n      background: color('petrol', 'step-2');\r\n      bottom: 0;\r\n      right: 0;\r\n      font-weight: weight('bold');\r\n      @include step(-1);\r\n      @include padding('3xs', '2xs');\r\n      letter-spacing: ls('2%');\r\n      \r\n      &:hover {\r\n        color: color('red');\r\n      }\r\n    }\r\n  }\r\n\r\n  hr {\r\n    @extend .u-hr\r\n  }\r\n\r\n  &__typo {\r\n\r\n    &__sidebar {\r\n      width: grid-column(2);\r\n\r\n      span {\r\n        display: block;\r\n\r\n      }\r\n\r\n      .x2 {\r\n        margin-top: 4.25em;\r\n        border: 1px solid color(\"grey\");\r\n        border-width: 1px 0;\r\n        height: 2em;\r\n        line-height: 2em;\r\n      }\r\n    }\r\n\r\n    &__main {\r\n      width: grid-column(10);\r\n    }\r\n  }\r\n\r\n  &__semi {\r\n    font-weight: 600;\r\n  }\r\n\r\n  &__photo-grid {\r\n    display: grid;\r\n    gap: 2px;\r\n    grid-template-columns: 1fr;\r\n    @include margin-top(xl);\r\n\r\n    @media only screen and (min-width: 880px) {\r\n      grid-auto-flow: dense;\r\n      grid-auto-rows: auto;\r\n\r\n      img {\r\n        height: 100%;\r\n        width: 100%;\r\n        object-fit: cover;\r\n      }\r\n\r\n      div {\r\n        grid-column: 1/3;\r\n        grid-row: 1/2;\r\n        display: flex;\r\n\r\n        h2 {\r\n          margin: auto var(--space-s);\r\n        }\r\n      }\r\n\r\n      &.grid-1 {\r\n        grid-template-columns: 40% 20% 40%;\r\n        grid-template-rows: var(--space-2xl) 400px 400px;\r\n\r\n        img {  \r\n          &:nth-child(2) {\r\n            grid-row: 2/3;\r\n            grid-column: 1/3;\r\n          }\r\n  \r\n          &:nth-child(3) {\r\n            grid-column: 3/4;\r\n            grid-row: 1/3;\r\n          }\r\n  \r\n          &:nth-child(5) {\r\n            grid-column: 2/4;\r\n          }\r\n        }\r\n      }\r\n\r\n      &.grid-2 {\r\n        grid-template-columns: 50% 50%;\r\n        grid-template-rows: var(--space-2xl) 300px 300px;\r\n\r\n        div {\r\n          grid-column: 1/2;\r\n        }\r\n\r\n        img {\r\n          &:nth-child(2) {\r\n            grid-row: 2/4;\r\n          }\r\n          &:nth-child(3) {\r\n            grid-row: 1/3;\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n  }\r\n\r\n  .c-alert ul li {\r\n    list-style: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"20\" viewBox=\"0 0 10 20\"><circle cx=\"5\" cy=\"14\" r=\"3.5\" fill=\"%2313AA13\" fill-rule=\"evenodd\"/></svg>') outside;    \r\n    margin-left: 1em;\r\n    padding-left: 0.5rem;\r\n\r\n    h3,\r\n    h4 {\r\n      line-height: lh('prose');\r\n      font-size: 1em;\r\n      color: color('green');\r\n    }\r\n  }\r\n}\r\n\r\n// Header responsive styles\r\n@media only screen and (max-width: 1050px) {\r\n  .c-library__logo-name span:nth-last-child(3),\r\n  .c-library__logo-name span:nth-last-child(1) {\r\n    @include step(-2);\r\n  }\r\n\r\n  .c-library__logo-name span:nth-last-child(2) {\r\n    @include step(1);\r\n  }\r\n\r\n  .c-library__header nav li:last-child {\r\n    display: none;\r\n  }\r\n}\r\n\r\n@media only screen and (min-width: 650px) and (max-width: 700px),\r\n            screen and (max-width: 450px) {\r\n  .c-library__header nav .u-row {\r\n    @include space('gap', '2xs');\r\n    @include step(-2);\r\n  }\r\n}\r\n\r\n.c-library__header {\r\n  @media only screen and (max-width: 650px) {\r\n    nav a {\r\n      @include padding('2xs',0);\r\n      display: block;\r\n    }\r\n\r\n    .c-library-page-active:after {\r\n      @include space('bottom','3xs');\r\n    }\r\n  }\r\n}","// Breakout\r\n// Force an element to fill 100% of the window width, ignoring its container\r\n\r\n@mixin breakout($pad: 0) {\r\n    left: 50%;\r\n    left: calc( 50% + var(--scrollbarWidth)/2.0001 );\r\n    position: relative;\r\n    transform: translateX(-50vw);\r\n    width: 100vw;\r\n    width: calc( 100vw - var(--scrollbarWidth) );\r\n    padding-left: safe-space($pad);\r\n    padding-right: safe-space($pad);\r\n}\r\n\r\n.u-breakout {\r\n    @include breakout\r\n}","// Cutoff corner effect\r\n\r\n$g : var(--gutter);\r\n$og : calc(100% - var(--gutter));\r\n\r\n@mixin cutoff($corner:\"bottom-right\") {\r\n    @if $corner == \"top-left\" {\r\n        clip-path: polygon( \r\n            $g 0,\r\n            100% 0,\r\n            100% 100%,\r\n            0 100%,\r\n            0 $g \r\n        );\r\n    } @else if $corner == \"top-right\" {\r\n        clip-path: polygon( \r\n            0 0,\r\n            $og 0,\r\n            100% $g,\r\n            100% 100%,\r\n            0 100% \r\n        );\r\n    } @else if $corner == \"bottom-left\" {\r\n        clip-path: polygon( \r\n            0 0,\r\n            100% 0,\r\n            100% 100%,\r\n            $g 100%,\r\n            0 $og \r\n        );\r\n    } @else {\r\n        clip-path: polygon( \r\n            0 0,\r\n            100% 0,\r\n            100% $og,\r\n            $og 100%,\r\n            0 100% \r\n        );\r\n    }\r\n}\r\n\r\n.u-cutoff {\r\n    @include cutoff\r\n}\r\n\r\n.u-cutoff--top-right {\r\n    @include cutoff(\"top-right\")\r\n}\r\n\r\n.u-cutoff--top-left {\r\n    @include cutoff(\"top-left\")\r\n}\r\n\r\n.u-cutoff--bottom-left {\r\n    @include cutoff(\"bottom-left\")\r\n}","$weights: (\r\n  base: 400,\r\n  semi: 600,\r\n  bold: 700\r\n);\r\n\r\n$line-heights: (\r\n  base: 1.2,\r\n  prose: 1.6,\r\n);\r\n\r\n$letter-spacings: (\r\n  '4%': 0.04em,\r\n  '2%': 0.02em,\r\n  base: -0.01em,\r\n  '-2%': -0.02em,\r\n  '-3%': -0.03em\r\n);\r\n\r\n$font-stack: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;\r\n\r\n/* @link https://utopia.fyi/generator-mk-ii?c=320,16,1.2,1332,18,1.2,10,2, */\r\n$steps: (\r\n  -2: (\r\n    min: 12.64,\r\n    max: 12.50,\r\n    ls: base\r\n  ),\r\n\r\n  -1: (\r\n    min: 14.22,\r\n    max: 15.00,\r\n    ls: base\r\n  ),\r\n\r\n  0: (\r\n    min: 16.00,\r\n    max: 18.00,\r\n    ls: base\r\n  ),\r\n\r\n  1: (\r\n    min: 18.00,\r\n    max: 21.60,\r\n    ls: '-2%'\r\n  ),\r\n\r\n  2: (\r\n    min: 20.25,\r\n    max: 25.92,\r\n    ls: '-2%'\r\n  ),\r\n\r\n  3: (\r\n    min: 22.78,\r\n    max: 31.10,\r\n    ls: '-2%'\r\n  ),\r\n\r\n  4: (\r\n    min: 25.63,\r\n    max: 37.32,\r\n    ls: '-3%'\r\n  ),\r\n\r\n  5: (\r\n    min: 28.83,\r\n    max: 44.79,\r\n    ls: '-3%'\r\n  ),\r\n\r\n  6: (\r\n    min: 32.44,\r\n    max: 53.75,\r\n    ls: '-3%'\r\n  ),\r\n\r\n  7: (\r\n    min: 36.49,\r\n    max: 64.50,\r\n    ls: '-3%'\r\n  ),\r\n\r\n  8: (\r\n    min: 41.05,\r\n    max: 77.40,\r\n    ls: '-3%'\r\n  ),\r\n\r\n  9: (\r\n    min: 46.18,\r\n    max: 92.88,\r\n    ls: '-3%'\r\n  ),\r\n\r\n  10: (\r\n    min: 51.96,\r\n    max: 111.45,\r\n    ls: '-3%'\r\n  )\r\n);\r\n\r\n$f-min-width: 320;\r\n$f-max-width: 1332;\r\n\r\n:root {\r\n  --fluid-min-width: #{$f-min-width};\r\n  --fluid-max-width: #{$f-max-width};\r\n\r\n  --fluid-screen: 100vw;\r\n  --fluid-bp: calc(\r\n    (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) /\r\n      (var(--fluid-max-width) - var(--fluid-min-width))\r\n  );\r\n}\r\n\r\n@media screen and (min-width: #{$f-max-width * 1px}) {\r\n  :root {\r\n    --fluid-screen: calc(var(--fluid-max-width) * 1px);\r\n  }\r\n}\r\n\r\n:root {\r\n  @each $name, $step in $steps {\r\n    --f-#{$name}-min: #{map-get($step, min)};\r\n    --f-#{$name}-max: #{map-get($step, max)};\r\n    --step-#{$name}: calc(\r\n      ((var(--f-#{$name}-min) / 16) * 1rem) + (var(--f-#{$name}-max) - var(--f-#{$name}-min)) *\r\n        var(--fluid-bp)\r\n    );\r\n  }\r\n}\r\n\r\n@font-face {\r\n  font-family: 'Inter';\r\n  font-style:  normal;\r\n  font-weight: 400;\r\n  font-display: swap;\r\n  src: url(\"../fonts/Inter-Regular.woff2\") format(\"woff2\"),\r\n       url(\"../fonts/Inter-Regular.woff\") format(\"woff\");\r\n}\r\n\r\n@font-face {\r\n  font-family: 'Inter';\r\n  font-style:  normal;\r\n  font-weight: 600;\r\n  font-display: swap;\r\n  src: url('../fonts/Inter-SemiBold.woff2') format(\"woff2\"),\r\n       url('../fonts/Inter-SemiBold.woff') format(\"woff\");\r\n}\r\n\r\n@font-face {\r\n  font-family: 'Inter';\r\n  font-style:  normal;\r\n  font-weight: 700;\r\n  font-display: swap;\r\n  src: url('../fonts/Inter-Bold.woff2') format(\"woff2\"),\r\n       url('../fonts/Inter-Bold.woff') format(\"woff\");\r\n}","@use 'sass:math';\r\n\r\n$wrapper: 78.75rem;\r\n\r\n$space-base: 18;\r\n$spaces: (\r\n  \"3xs\": 0.25,\r\n  \"2xs\": 0.5,\r\n  \"xs\": 0.75,\r\n  \"s\": 1,\r\n  \"m\": 1.5,\r\n  \"l\": 2,\r\n  \"xl\": 3,\r\n  \"2xl\": 4,\r\n  \"3xl\": 6,\r\n  \"4xl\": 8,\r\n);\r\n\r\n:root {\r\n  --max-screen: #{ math.div($f-max-width, 16) };\r\n  --fc-screen: 100vw;\r\n  --fc-bp: calc((var(--fc-screen) - 20em) / (var(--max-screen) - 20));\r\n\r\n  --fc-base: #{$space-base};\r\n\r\n  @each $space, $_ in $spaces {\r\n    --fc-#{$space}: #{space-size($space)};\r\n    --space-#{$space}: calc(var(--fc-#{$space}) / 16 * 1rem);\r\n  }\r\n\r\n  $min: \"\";\r\n  @each $max, $_ in $spaces {\r\n    @if ($min) {\r\n      @include space-between($min, $max);\r\n    }\r\n    $min: $max;\r\n  }\r\n\r\n  @include space-between(s, l);\r\n  @include space-between(s, m);\r\n  @include space-between(xs, l);\r\n  @include space-between(m, xl);\r\n  @include space-between(l, 2xl);\r\n  @include space-between(s, xl);\r\n  @include space-between(l, 3xl);\r\n  @include space-between(xl, 3xl);\r\n  @include space-between(l, 4xl);\r\n  @include space-between(3xs, m);\r\n\r\n  --gutter: var(--space-s-l);\r\n}\r\n\r\n@media screen and (min-width: 75em) {\r\n  :root {\r\n    --fc-screen: calc(var(--max-screen) * 1rem);\r\n  }\r\n}\r\n","@import './breakout.scss';\r\n@import './cutoff.scss';\r\n\r\n@function color($palette, $tone: 'step-0') {\r\n  @return map-get(map-get($colours, $palette), $tone);\r\n}\r\n\r\n@function lh($size: 'base') {\r\n  @return map-get($line-heights, $size);\r\n}\r\n\r\n@function ls($size: 'base') {\r\n  @return map-get($letter-spacings, $size);\r\n}\r\n\r\n@function weight($size: 'base') {\r\n  @return map-get($weights, $size);\r\n}\r\n\r\n@mixin step($step: 0) {\r\n  letter-spacing: ls(map-get(map-get($steps, $step), ls));\r\n  font-size: 1px * map-get(map-get($steps, $step), max);\r\n  font-size: var(--step-#{$step});\r\n}\r\n\r\n@mixin flow($size) {\r\n  & > * + * {\r\n    @include margin-top($size);\r\n  }\r\n}\r\n\r\n@function space-size($key: s) {\r\n  @return $space-base * map-get($spaces, $key);\r\n}\r\n\r\n@function space-unit($key: s) {\r\n  @return space-size($key) * 1px;\r\n}\r\n\r\n@mixin space-between($min, $max) {\r\n  --space-#{$min}-#{$max}: calc(\r\n    ((var(--fc-#{$min}) / 16) * 1rem) + (var(--fc-#{$max}) - var(--fc-#{$min})) *\r\n      var(--fluid-bp)\r\n  );\r\n}\r\n\r\n@function safe-space($value, $safe: false) {\r\n  @if (type-of($value) == number) {\r\n    @return $value;\r\n  } @else if (type-of($value) == null) {\r\n    @return 0;\r\n  } @else if (type-of($value) == string) {\r\n    $split: get-min-max($value);\r\n    $min: nth($split, 1);\r\n\r\n    @if ($value == 'gutter') {\r\n      @if ($safe) {\r\n        @return space-unit(s);\r\n      } @else {\r\n        @return var(--gutter);        \r\n      }\r\n    }\r\n\r\n    @if ($value == 'auto') {\r\n      @return auto;\r\n    }\r\n    \r\n    @if ($safe) {\r\n      @return space-unit($min);\r\n    } @else {\r\n      @return var(--space-#{$value});      \r\n    }\r\n  }\r\n}\r\n\r\n@mixin padding($arg1: '', $arg2: '', $arg3: '', $arg4: '') { @include space('padding', $arg1, $arg2, $arg3, $arg4); }\r\n@mixin padding-top($arg1: '') { @include space('padding-top', $arg1); }\r\n@mixin padding-right($arg1: '') { @include space('padding-right', $arg1); }\r\n@mixin padding-bottom($arg1: '') { @include space('padding-bottom', $arg1); }\r\n@mixin padding-left($arg1: '') { @include space('padding-left', $arg1); }\r\n@mixin margin($arg1: '', $arg2: '', $arg3: '', $arg4: '') { @include space('margin', $arg1, $arg2, $arg3, $arg4); }\r\n@mixin margin-top($arg1: '') { @include space('margin-top', $arg1); }\r\n@mixin margin-right($arg1: '') { @include space('margin-right', $arg1); }\r\n@mixin margin-bottom($arg1: '') { @include space('margin-bottom', $arg1); }\r\n@mixin margin-left($arg1: '') { @include space('margin-left', $arg1); }\r\n@mixin grid-gap($arg1: '', $arg2: '') { @include space('grid-gap', $arg1, $arg2); }\r\n@mixin gap($arg1: '', $arg2: '') { @include space('gap', $arg1, $arg2); }\r\n@mixin top($arg1: '') { @include space('top', $arg1); }\r\n\r\n@mixin space($property, $arg1: '', $arg2: '', $arg3: '', $arg4: '') {\r\n  @if ($arg4 != '') {\r\n    #{$property}: safe-space($arg1, true) safe-space($arg2, true) safe-space($arg3, true) safe-space($arg4, true);\r\n    #{$property}: safe-space($arg1) safe-space($arg2) safe-space($arg3) safe-space($arg4);\r\n  } @else if ($arg3 != '') {\r\n    #{$property}: safe-space($arg1, true) safe-space($arg2, true) safe-space($arg3, true);\r\n    #{$property}: safe-space($arg1) safe-space($arg2) safe-space($arg3);\r\n  } @else if ($arg2 != '') {\r\n    #{$property}: safe-space($arg1, true) safe-space($arg2, true);\r\n    #{$property}: safe-space($arg1) safe-space($arg2);\r\n  } @else if ($arg1 != '') {\r\n    #{$property}: safe-space($arg1, true);\r\n    #{$property}: safe-space($arg1);\r\n  }\r\n}\r\n\r\n@function get-min-max($value) {\r\n  $split: str-split($value, '-');\r\n  $min: nth($split, 1);\r\n\r\n  @if (length($split) == 1) {\r\n    @return ($min, null);\r\n  } @else {\r\n    @return ($min, nth($split, 2))\r\n  }\r\n}\r\n\r\n@function str-split($string, $separator) {\r\n  // empty array/list\r\n  $split-arr: ();\r\n  // first index of separator in string\r\n  $index : str-index($string, $separator);\r\n  // loop through string\r\n  @while $index != null {\r\n      // get the substring from the first character to the separator\r\n      $item: str-slice($string, 1, $index - 1);\r\n      // push item to array\r\n      $split-arr: append($split-arr, $item);\r\n      // remove item and separator from string\r\n      $string: str-slice($string, $index + 1);\r\n      // find new index of separator\r\n      $index : str-index($string, $separator);\r\n  }\r\n  // add the remaining string to list (the last item)\r\n  $split-arr: append($split-arr, $string);\r\n\r\n  @return $split-arr;\r\n}\r\n\r\n@mixin hyphenated {\r\n  @media only screen and (max-width: 28rem) {\r\n    word-break: break-word;\r\n    -webkit-hyphens: auto;\r\n    -ms-hyphens: auto;\r\n    hyphens: auto;\r\n  }\r\n\r\n  @media only screen and (max-width: 70rem) {\r\n    [lang='de-DE'] & {\r\n      word-break: break-word;\r\n      -webkit-hyphens: auto;\r\n      -ms-hyphens: auto;\r\n      hyphens: auto;\r\n    }\r\n  }\r\n}","\r\n*,\r\n*:before,\r\n*:after {\r\n  box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: flex-start;\r\n  align-items: stretch;\r\n  min-height: 100vh;\r\n  margin: 0;\r\n}\r\n\r\nhtml {\r\n  scroll-behavior: smooth;\r\n}\r\n\r\nblockquote,\r\npre,\r\nol,\r\nul,\r\nfigure {\r\n  padding: 0;\r\n  margin: 0;\r\n}\r\n\r\nimg {\r\n  max-width: 100%;\r\n  display: block;\r\n  height: auto;\r\n  border: none;\r\n}\r\n\r\narticle,\r\naside,\r\nfigure,\r\nfooter,\r\nheader,\r\naside,\r\nmain,\r\nnav {\r\n  display: block;\r\n}\r\n\r\niframe {\r\n  border: none;\r\n}\r\n\r\n// Typography\r\n\r\n@mixin mp-reset-base {\r\n  font: weight() #{1.125rem}/lh() $font-stack;\r\n  @include step();\r\n  color: color('grey');\r\n}\r\n\r\nbody {\r\n  @include mp-reset-base();\r\n}\r\n\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np,\r\nul,\r\nol,\r\ndl {\r\n  margin: 0\r\n}\r\n\r\nul, ol, p {\r\n  line-height: lh();\r\n}\r\n\r\na {\r\n  text-decoration: none;\r\n}\r\n\r\na,\r\na:hover {\r\n  cursor: pointer;\r\n  color: inherit;\r\n}\r\n\r\n// Lists\r\n\r\n.mp ol,\r\n.mp ul {\r\n  list-style: none;\r\n}\r\n\r\n// Font styles\r\n\r\ncite,\r\naddress {\r\n  font-style: normal;\r\n}\r\n\r\n// Form\r\n\r\n[type=\"submit\"],\r\n[type=\"button\"],\r\nbutton {\r\n  border-radius: 0;\r\n  background: transparent;\r\n  box-shadow: none;\r\n  appearance: none;\r\n  padding: 0;\r\n  cursor: pointer;\r\n  border: none;\r\n  color: inherit;\r\n  font: inherit;\r\n}\r\n\r\n[disabled],\r\n.mp.c-button[disabled] {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n}\r\n\r\nlabel {\r\n  cursor: pointer;\r\n}\r\n\r\nfieldset {\r\n  border: 0;\r\n  padding: 0.01em 0 0 0;\r\n}\r\n\r\n// Animation\r\n\r\n@media (prefers-reduced-motion:reduce) {\r\n  * {\r\n    -webkit-animation: none!important;\r\n    animation: none!important;\r\n    transition: none!important;\r\n    scroll-behavior: auto!important;\r\n  }\r\n}\r\n","code[class*=\"language-\"],\r\npre[class*=\"language-\"] {\r\n\ttext-align: left;\r\n\twhite-space: pre;\r\n\tword-spacing: normal;\r\n\tword-break: normal;\r\n\tword-wrap: normal;\r\n  color: color('petrol', 'step-1');\r\n  background: color('petrol', 'step-3');\r\n  font-family: 'Source Code Pro', monospace;\r\n\tfont-size: 1rem;\r\n\tline-height: 1.5em;\r\n\r\n\t-moz-tab-size: 4;\r\n\t-o-tab-size: 4;\r\n\ttab-size: 4;\r\n\r\n\t-webkit-hyphens: none;\r\n\t-moz-hyphens: none;\r\n\t-ms-hyphens: none;\r\n\thyphens: none;\r\n}\r\n\r\ncode[class*=\"language-\"]::-moz-selection,\r\npre[class*=\"language-\"]::-moz-selection,\r\ncode[class*=\"language-\"] ::-moz-selection,\r\npre[class*=\"language-\"] ::-moz-selection {\r\n\tbackground: #cceae7;\r\n\tcolor: #263238;\r\n}\r\n\r\ncode[class*=\"language-\"]::selection,\r\npre[class*=\"language-\"]::selection,\r\ncode[class*=\"language-\"] ::selection,\r\npre[class*=\"language-\"] ::selection {\r\n\tbackground: #cceae7;\r\n\tcolor: #263238;\r\n}\r\n\r\n:not(pre) > code[class*=\"language-\"] {\r\n\twhite-space: normal;\r\n\tborder-radius: 0.2em;\r\n\tpadding: 0.1em;\r\n}\r\n\r\npre[class*=\"language-\"] {\r\n\toverflow: auto;\r\n  position: relative;\r\n  @include padding('s');\r\n}\r\n\r\n.language-css > code,\r\n.language-sass > code,\r\n.language-scss > code {\r\n\tcolor: color('utility-orange');\r\n}\r\n\r\n[class*=\"language-\"] .namespace {\r\n\topacity: 0.7;\r\n}\r\n\r\n.token.atrule {\r\n\tcolor: color('petrol', 'step-1');\r\n}\r\n\r\n.token.attr-name {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.attr-value {\r\n\tcolor: color('green');\r\n}\r\n\r\n.token.attribute {\r\n\tcolor: color('green');\r\n}\r\n\r\n.token.boolean {\r\n\tcolor: color('red');\r\n}\r\n\r\n.token.builtin {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.cdata {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.char {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.class {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.class-name {\r\n\tcolor: #6182b8;\r\n}\r\n\r\n.token.comment {\r\n\tcolor: #aabfc9;\r\n}\r\n\r\n.token.constant {\r\n\tcolor: color('petrol', 'step-1');\r\n}\r\n\r\n.token.deleted {\r\n\tcolor: color('red');\r\n}\r\n\r\n.token.doctype {\r\n\tcolor: #aabfc9;\r\n}\r\n\r\n.token.entity {\r\n\tcolor: color('red');\r\n}\r\n\r\n.token.function {\r\n\tcolor: color('petrol', 'step-1');\r\n}\r\n\r\n.token.hexcode {\r\n\tcolor: color('utility-orange');\r\n}\r\n\r\n.token.id {\r\n\tcolor: color('petrol', 'step-1');\r\n\tfont-weight: bold;\r\n}\r\n\r\n.token.important {\r\n\tcolor: color('petrol', 'step-1');\r\n\tfont-weight: bold;\r\n}\r\n\r\n.token.inserted {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.keyword {\r\n\tcolor: color('petrol', 'step-1');\r\n}\r\n\r\n.token.number {\r\n\tcolor: color('utility-orange');\r\n}\r\n\r\n.token.operator {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.prolog {\r\n\tcolor: #aabfc9;\r\n}\r\n\r\n.token.property {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.pseudo-class {\r\n\tcolor: color('green');\r\n}\r\n\r\n.token.pseudo-element {\r\n\tcolor: color('green');\r\n}\r\n\r\n.token.punctuation {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.regex {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.selector {\r\n\tcolor: color('red');\r\n}\r\n\r\n.token.string {\r\n\tcolor: color('green');\r\n}\r\n\r\n.token.symbol {\r\n\tcolor: color('petrol', 'step-1');\r\n}\r\n\r\n.token.tag {\r\n\tcolor: color('petrol');\r\n}\r\n\r\n.token.unit {\r\n\tcolor: color('utility-orange');\r\n}\r\n\r\n.token.url {\r\n\tcolor: color('red');\r\n}\r\n\r\n.token.variable {\r\n\tcolor: color('red');\r\n}\r\n\r\n",".u-hr {\r\n  margin: 0;\r\n  border: none;\r\n  @include padding-bottom('m-xl');\r\n  @include margin-bottom('m-xl');\r\n  border-bottom: 1px solid color('petrol', 'step-2');\r\n}\r\n\r\n.u-border-top {\r\n  border-top: 1px solid color('petrol', 'step-2');\r\n}\r\n\r\n.u-border-bottom {\r\n  border-bottom: 1px solid color('petrol', 'step-2');\r\n}\r\n\r\n.u-border {\r\n  border: 1px solid color('petrol', 'step-2');\r\n}\r\n\r\n.o-prose hr {\r\n  @extend .u-hr\r\n}","@use 'sass:math';\r\n\r\n// Layout\r\n$grid-width: 1260;\r\n$grid-columns: 12;\r\n$grid-column-width: 72;\r\n$grid-gutter-width: 36;\r\n\r\n@function grid-gutter() {\r\n  @return math.div($grid-gutter-width, $grid-width) * 100%;\r\n}\r\n\r\n@function grid-column($count) {\r\n  @return math.div(\r\n    (\r\n      ($count * $grid-column-width) + (($count - 1) * $grid-gutter-width)\r\n    ), $grid-width\r\n  ) * 100%;\r\n}\r\n\r\n@function grid-column-px($count) {\r\n  @return (($count * $grid-column-width) + (($count - 1) * $grid-gutter-width)) * 1px;\r\n}\r\n\r\n.o-grid {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  justify-content: stretch;\r\n  margin-bottom: calc(-1 * #{space-unit()});\r\n  margin-bottom: calc(-1 * var(--gutter));\r\n  width: 100%;\r\n\r\n  &--float:after {\r\n    content: \" \";\r\n    display: table;\r\n    clear: both;\r\n  }\r\n\r\n  &--between {\r\n    justify-content: space-between;\r\n  }\r\n\r\n  &--no-height-match {\r\n    align-items: start;\r\n  }\r\n\r\n  & > * {\r\n    width: 100%;\r\n    @include margin-bottom(\"gutter\");\r\n  }\r\n\r\n  &--of-two {\r\n    @media (min-width: 40em) {\r\n      & > * {\r\n        width: calc((50% - (1 * #{space-unit()} / 2)) - 0.1px);\r\n        width: calc((50% - (1 * var(--gutter) / 2)) - 0.1px);\r\n\r\n        & + * {\r\n          @include margin-left(\"gutter\");\r\n        }\r\n\r\n        &:nth-child(2n + 1) {\r\n          margin-left: 0;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &--of-two-late {\r\n    @media (min-width: 55em) {\r\n      & > * {\r\n        width: calc((50% - (1 * #{space-unit()} / 2)) - 0.1px);\r\n        width: calc((50% - (1 * var(--gutter) / 2)) - 0.1px);\r\n\r\n        & + * {\r\n          @include margin-left(\"gutter\");\r\n        }\r\n\r\n        &:nth-child(2n + 1) {\r\n          margin-left: 0;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &--of-three {\r\n    @media (min-width: 38em) and (max-width: 54.9375em) { // 608 - 1087\r\n      & > * {\r\n        width: calc((50% - (1 * #{space-unit()} / 2)) - 0.1px);\r\n        width: calc((50% - (1 * var(--gutter) / 2)) - 0.1px);\r\n\r\n        & + * {\r\n          @include margin-left(\"gutter\");\r\n        }\r\n\r\n        &:nth-child(2n + 1) {\r\n          margin-left: 0;\r\n        }\r\n      }\r\n    }\r\n\r\n    @media (min-width: 55em) {\r\n      & > * {\r\n        width: calc((33.333% - (2 * #{space-unit()} / 3)) - 0.1px);\r\n        width: calc((33.333% - (2 * var(--gutter) / 3)) - 0.1px);\r\n\r\n        & + * {\r\n          @include margin-left(\"gutter\");\r\n        }\r\n\r\n        &:nth-child(3n + 1) {\r\n          margin-left: 0;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &--of-three-late {\r\n    @media (min-width: 38em) and (max-width: 67.9375em) {\r\n      & > * {\r\n        width: calc((50% - (1 * #{space-unit()} / 2)) - 0.1px);\r\n        width: calc((50% - (1 * var(--gutter) / 2)) - 0.1px);\r\n\r\n        & + * {\r\n          @include margin-left(\"gutter\");\r\n        }\r\n\r\n        &:nth-child(2n + 1) {\r\n          margin-left: 0;\r\n        }\r\n      }\r\n    }\r\n\r\n    @media (min-width: 68em) {\r\n      & > * {\r\n        width: calc((33.333% - (2 * #{space-unit()} / 3)) - 0.1px);\r\n        width: calc((33.333% - (2 * var(--gutter) / 3)) - 0.1px);\r\n\r\n        & + * {\r\n          @include margin-left(\"gutter\");\r\n        }\r\n\r\n        &:nth-child(3n + 1) {\r\n          margin-left: 0;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &--of-four {\r\n    @media (min-width: 38em) and (max-width: 59.9375em) {\r\n      & > * {\r\n        width: calc((50% - (1 * #{space-unit()} / 2)) - 0.1px);\r\n        width: calc((50% - (1 * var(--gutter) / 2)) - 0.1px);\r\n\r\n        & + * {\r\n          @include margin-left(\"gutter\");\r\n        }\r\n\r\n        &:nth-child(2n + 1) {\r\n          margin-left: 0;\r\n        }\r\n      }\r\n    }\r\n\r\n    @media (min-width: 60em) {\r\n      & > * {\r\n        width: calc((25% - (3 * #{space-unit()} / 4)) - 0.1px);\r\n        width: calc((25% - (3 * var(--gutter) / 4)) - 0.1px);\r\n\r\n        & + * {\r\n          @include margin-left(\"gutter\");\r\n        }\r\n\r\n        &:nth-child(4n + 1) {\r\n          margin-left: 0;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &--swipeable {\r\n    @media (max-width: 54.9375em) {\r\n      @include breakout('gutter');\r\n      flex-wrap: nowrap;\r\n      overflow-x: scroll;\r\n      scroll-snap-type: x mandatory;\r\n      scroll-padding: var(--gutter);\r\n      -webkit-overflow-scrolling: touch;\r\n\r\n      & > * {\r\n        flex: 0 0 auto;\r\n        max-width: 23em;\r\n        width: calc(85vw - var(--gutter)*2.333); // !important\r\n        scroll-snap-align: start;\r\n        scroll-snap-stop: always;\r\n      }\r\n\r\n      & > * + * {\r\n        margin-left: var(--gutter) !important;\r\n      }\r\n    }\r\n  }\r\n\r\n  @media (min-width: 55em) {\r\n    &--4\\/7 > :nth-child(2n + 2),\r\n    &--4\\/7-switch > :nth-child(2n + 2) {\r\n      width: grid-column(7)\r\n    }\r\n\r\n    &--9\\/3 > :nth-child(2n + 1),\r\n    &--8\\/3 > :nth-child(2n + 1),\r\n    &--8\\/4 > :nth-child(2n + 1),\r\n    &--3\\/9 > :nth-child(2n + 2),\r\n    &--3\\/8 > :nth-child(2n + 2),\r\n    &--4\\/8 > :nth-child(2n + 2),\r\n    &--9\\/3-switch > :nth-child(2n + 2),\r\n    &--8\\/3-switch > :nth-child(2n + 2),\r\n    &--8\\/4-switch > :nth-child(2n + 2),\r\n    &--3\\/9-switch > :nth-child(2n + 1),\r\n    &--3\\/8-switch > :nth-child(2n + 1),\r\n    &--4\\/8-switch > :nth-child(2n + 1) {\r\n      width: grid-column(8);\r\n    }\r\n\r\n    &--9\\/3 > :nth-child(2n + 2),\r\n    &--8\\/3 > :nth-child(2n + 2),\r\n    &--8\\/4 > :nth-child(2n + 2),\r\n    &--3\\/9 > :nth-child(2n + 1),\r\n    &--3\\/8 > :nth-child(2n + 1),\r\n    &--4\\/8 > :nth-child(2n + 1),\r\n    &--4\\/7 > :nth-child(2n + 1),\r\n    &--9\\/3-switch > :nth-child(2n + 1),\r\n    &--8\\/3-switch > :nth-child(2n + 1),\r\n    &--8\\/4-switch > :nth-child(2n + 1),\r\n    &--3\\/9-switch > :nth-child(2n + 2),\r\n    &--3\\/8-switch > :nth-child(2n + 2),\r\n    &--4\\/8-switch > :nth-child(2n + 2),\r\n    &--4\\/7-switch > :nth-child(2n + 1) {\r\n      width: grid-column(4);\r\n    }\r\n\r\n    &--3\\/9 > :nth-child(2n + 2),\r\n    &--3\\/8 > :nth-child(2n + 2),\r\n    &--4\\/8 > :nth-child(2n + 2),\r\n    &--9\\/3 > :nth-child(2n + 2),\r\n    &--8\\/3 > :nth-child(2n + 2),\r\n    &--8\\/4 > :nth-child(2n + 2),\r\n    &--9\\/3-switch > :nth-child(2n + 1),\r\n    &--8\\/3-switch > :nth-child(2n + 1),\r\n    &--8\\/4-switch > :nth-child(2n + 1),\r\n    &--3\\/9-switch > :nth-child(2n + 1),\r\n    &--3\\/8-switch > :nth-child(2n + 1),\r\n    &--4\\/8-switch > :nth-child(2n + 1) {\r\n      margin-left: grid-gutter();\r\n      margin-right: 0;\r\n    }\r\n\r\n    &--8\\/3 > :nth-child(2n + 1),\r\n    &--3\\/8 > :nth-child(2n + 2),\r\n    &--8\\/3-switch > :nth-child(2n + 2),\r\n    &--3\\/8-switch > :nth-child(2n + 1) {\r\n      max-width: grid-column-px(8);\r\n    }\r\n\r\n    &[class*=\"switch\"] > :nth-child(2n + 1) {\r\n      order: 1;\r\n    }\r\n\r\n    &--layout {\r\n      margin-bottom: 0;\r\n\r\n      & > :nth-last-child(1),\r\n      & > :nth-last-child(2) {\r\n        margin-bottom: 0;\r\n      }\r\n    }\r\n\r\n    &--push {\r\n      justify-content: space-between;\r\n    }\r\n\r\n    &--pull {\r\n      justify-content: flex-start;\r\n    }\r\n\r\n    &--float {\r\n      display: block;\r\n    }\r\n\r\n    &--float:not([class*=\"switch\"]) > :nth-child(2n + 1),\r\n    &--float[class*=\"switch\"] > :nth-child(2n + 2) {\r\n      float: left;\r\n    }\r\n\r\n    &--float:not([class*=\"switch\"]) > :nth-child(2n + 2),\r\n    &--float[class*=\"switch\"] > :nth-child(2n + 1) {\r\n      float: right;\r\n    }\r\n  }\r\n\r\n  @media (min-width: 70em) {\r\n    &--9\\/3 > :nth-child(2n + 1),\r\n    &--8\\/3 > :nth-child(2n + 1),\r\n    &--3\\/9 > :nth-child(2n + 2),\r\n    &--3\\/8 > :nth-child(2n + 2),\r\n    &--9\\/3-switch > :nth-child(2n + 2),\r\n    &--8\\/3-switch > :nth-child(2n + 2),\r\n    &--3\\/9-switch > :nth-child(2n + 1),\r\n    &--3\\/8-switch > :nth-child(2n + 1) {\r\n      width: grid-column(9);\r\n    }\r\n\r\n    &--9\\/3 > :nth-child(2n + 2),\r\n    &--8\\/3 > :nth-child(2n + 2),\r\n    &--3\\/9 > :nth-child(2n + 1),\r\n    &--3\\/8 > :nth-child(2n + 1),\r\n    &--9\\/3-switch > :nth-child(2n + 1),\r\n    &--8\\/3-switch > :nth-child(2n + 1),\r\n    &--3\\/9-switch > :nth-child(2n + 2),\r\n    &--3\\/8-switch > :nth-child(2n + 2) {\r\n      width: grid-column(3);\r\n    }\r\n  }\r\n}\r\n"],"names":[],"version":3,"file":"library.css.map"}
+{"mappings":"A,gFEcA,6NC2BA,8GAIA,4GAIA,8FAIA,8GCoDA,mMAWA,qCACE,uDAKF,2nDAWA,6NASA,+NASA,uNCrIA,88EAkCA,mCACE,gDEpDF,uCAMA,iHASA,4BAIA,+CASA,sDAOA,gEAWA,gBAYA,8LAIA,sCAaA,wBAIA,uBAIA,uCAQA,8BAOA,+BAOA,+JAcA,gEAMA,qBAIA,oCAOA,uCACE,qFC1IF,yRAuBA,yKAgBA,oFAMA,0FAMA,yEAMA,yCAIA,4BAIA,+BAIA,iDAQA,6BAIA,mEAgBA,gCAIA,6BAIA,8BAIA,6BAIA,6BAIA,4BAIA,8BAIA,6BAIA,yDAUA,8BAIA,6BAIA,4BAIA,8BAIA,4BAIA,8BAIA,wDAQA,8CAQA,8BAIA,4BAIA,4BAIA,yBAIA,0BAIA,yCCvMA,8KAQA,2CAIA,iDAIA,mCCyBA,gIAQE,0DAMA,+CAIA,2CAIA,oEAME,wBA1CF,qHAIE,+DAIA,gDAwCA,wBAhDF,0HAIE,oEAIA,qDA8CA,0BAtDF,2HAIE,qEAIA,sDAoDA,kDA5DF,uHAIE,iEAIA,kDAwDA,wBAhEF,iIAIE,iEAIA,kDA8DA,kDAtEF,4HAIE,sEAIA,uDAkEA,wBA1EF,sIAIE,sEAIA,uDAwEA,oDAhFF,6HAIE,uEAIA,wDA4EA,wBApFF,uIAIE,uEAIA,wDAkFA,kDA1FF,sHAIE,gEAIA,iDAsFA,wBA9FF,sHAIE,gEAIA,iDA4FA,oDApGF,4HAIE,sEAIA,uDAgGA,wBAxGF,4HAIE,sEAIA,uDAsGA,6BADF,kWASI,qIAQA,4DAMJ,wBACE,oFAKA,6aAeA,kfAiBA,kcAgBA,0JAOA,gDAIA,sGASA,4CAIA,yCAIA,6BAIA,+GAKA,iHAMF,wBACE,mSAWA,oSTnQJ,0EAKE,mDAIA,iNAUE,yCAVF,0HAgBE,0CAhBF,sIAqBE,wDAIA,4DAGE,oIAWJ,6GAKA,2DAIE,yCAJF,iDAQE,yCARF,iDAaA,yCACE,4GAMF,oJAME,yCANF,mCAUE,yCAVF,mFAcE,0GAIA,yCAIA,uCAGE,uEAMF,uEAIA,kFAIE,2EAMJ,6DAGE,yCAHF,oCAQA,sGAOE,yCAPF,6CAWE,2KAME,yCAGE,oNAQA,wHAKA,2DAON,kDAIA,0EAIA,2FAIA,yLAaA,yDAIE,kFAQF,6DAMA,iCAGE,yCAHF,oCAQA,+CAIE,2GAME,2MASF,6DAKA,4GAOE,yCAPF,4CAaF,4CAIA,kIAOE,yDAKF,+FAKA,0JAOE,uDAKA,6HAOA,4DAMF,4GAME,yCANF,gGAaA,uDAGE,wCAHF,yGAQE,0CARF,2HAeA,yGAMA,gCAGE,wEAQA,qEAKE,sLAgBJ,8FAGE,qJAIA,2CAGA,uDAKF,kDAIE,gFAME,oDAMJ,gCAGE,oJAQA,mKAWF,qLASE,0DAIE,uDAMF,4DAIE,wDAMJ,kCAGE,6OAUE,6CAYF,yCAGE,6CAKA,oHASF,sCAKF,iCAIA,iHAME,yCANF,gEAUI,mEAMA,0DAKE,yDAKF,+GAKI,iEAKA,iEAKA,+DAMJ,2GAIE,kDAKE,4DAGA,6DASR,uHAKI,kFAKJ,+RAKE,sGAUJ,0CACE,0JAKA,4GAIA,mDAKF,4FAEE,4HAOA,yCACE,+EAKA","sources":["scss/library.css","src/assets/scss/library.scss","src/assets/scss/tools/breakout.scss","src/assets/scss/tools/cutoff.scss","src/assets/scss/foundations/typography.scss","src/assets/scss/foundations/space.scss","src/assets/scss/tools/index.scss","src/assets/scss/elements/reset.scss","src/assets/scss/objects/syntax-highlighting.scss","src/assets/scss/utilities/hr.scss","src/assets/scss/objects/grid.scss"],"sourcesContent":["@import \"https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap\";\n.u-breakout {\n  left: 50%;\n  left: calc(50% + var(--scrollbarWidth)  / 2.0001);\n  width: 100vw;\n  width: calc(100vw - var(--scrollbarWidth) );\n  padding-left: safe-space(0);\n  padding-right: safe-space(0);\n  position: relative;\n  transform: translateX(-50vw);\n}\n\n.u-cutoff {\n  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--gutter) ), calc(100% - var(--gutter) ) 100%, 0 100%);\n}\n\n.u-cutoff--top-right {\n  clip-path: polygon(0 0, calc(100% - var(--gutter) ) 0, 100% var(--gutter), 100% 100%, 0 100%);\n}\n\n.u-cutoff--top-left {\n  clip-path: polygon(var(--gutter) 0, 100% 0, 100% 100%, 0 100%, 0 var(--gutter) );\n}\n\n.u-cutoff--bottom-left {\n  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--gutter) 100%, 0 calc(100% - var(--gutter) ) );\n}\n\n:root {\n  --fluid-min-width: 320;\n  --fluid-max-width: 1332;\n  --fluid-screen: 100vw;\n  --fluid-bp: calc( (var(--fluid-screen)  - var(--fluid-min-width)  / 16 * 1rem)  / (var(--fluid-max-width)  - var(--fluid-min-width) ) );\n}\n\n@media screen and (min-width: 1332px) {\n  :root {\n    --fluid-screen: calc(var(--fluid-max-width)  * 1px);\n  }\n}\n\n:root {\n  --f--2-min: 12.64;\n  --f--2-max: 12.5;\n  --step--2: calc( ((var(--f--2-min)  / 16)  * 1rem)  + (var(--f--2-max)  - var(--f--2-min) )  * var(--fluid-bp) );\n  --f--1-min: 14.22;\n  --f--1-max: 15;\n  --step--1: calc( ((var(--f--1-min)  / 16)  * 1rem)  + (var(--f--1-max)  - var(--f--1-min) )  * var(--fluid-bp) );\n  --f-0-min: 16;\n  --f-0-max: 18;\n  --step-0: calc( ((var(--f-0-min)  / 16)  * 1rem)  + (var(--f-0-max)  - var(--f-0-min) )  * var(--fluid-bp) );\n  --f-1-min: 18;\n  --f-1-max: 21.6;\n  --step-1: calc( ((var(--f-1-min)  / 16)  * 1rem)  + (var(--f-1-max)  - var(--f-1-min) )  * var(--fluid-bp) );\n  --f-2-min: 20.25;\n  --f-2-max: 25.92;\n  --step-2: calc( ((var(--f-2-min)  / 16)  * 1rem)  + (var(--f-2-max)  - var(--f-2-min) )  * var(--fluid-bp) );\n  --f-3-min: 22.78;\n  --f-3-max: 31.1;\n  --step-3: calc( ((var(--f-3-min)  / 16)  * 1rem)  + (var(--f-3-max)  - var(--f-3-min) )  * var(--fluid-bp) );\n  --f-4-min: 25.63;\n  --f-4-max: 37.32;\n  --step-4: calc( ((var(--f-4-min)  / 16)  * 1rem)  + (var(--f-4-max)  - var(--f-4-min) )  * var(--fluid-bp) );\n  --f-5-min: 28.83;\n  --f-5-max: 44.79;\n  --step-5: calc( ((var(--f-5-min)  / 16)  * 1rem)  + (var(--f-5-max)  - var(--f-5-min) )  * var(--fluid-bp) );\n  --f-6-min: 32.44;\n  --f-6-max: 53.75;\n  --step-6: calc( ((var(--f-6-min)  / 16)  * 1rem)  + (var(--f-6-max)  - var(--f-6-min) )  * var(--fluid-bp) );\n  --f-7-min: 36.49;\n  --f-7-max: 64.5;\n  --step-7: calc( ((var(--f-7-min)  / 16)  * 1rem)  + (var(--f-7-max)  - var(--f-7-min) )  * var(--fluid-bp) );\n  --f-8-min: 41.05;\n  --f-8-max: 77.4;\n  --step-8: calc( ((var(--f-8-min)  / 16)  * 1rem)  + (var(--f-8-max)  - var(--f-8-min) )  * var(--fluid-bp) );\n  --f-9-min: 46.18;\n  --f-9-max: 92.88;\n  --step-9: calc( ((var(--f-9-min)  / 16)  * 1rem)  + (var(--f-9-max)  - var(--f-9-min) )  * var(--fluid-bp) );\n  --f-10-min: 51.96;\n  --f-10-max: 111.45;\n  --step-10: calc( ((var(--f-10-min)  / 16)  * 1rem)  + (var(--f-10-max)  - var(--f-10-min) )  * var(--fluid-bp) );\n}\n\n@font-face {\n  font-family: Inter;\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(\"../Inter-Regular.ed77b881.woff2\") format(\"woff2\"), url(\"../Inter-Regular.ca6858d7.woff\") format(\"woff\");\n}\n\n@font-face {\n  font-family: Inter;\n  font-style: normal;\n  font-weight: 600;\n  font-display: swap;\n  src: url(\"../Inter-SemiBold.dd034768.woff2\") format(\"woff2\"), url(\"../Inter-SemiBold.cc1168df.woff\") format(\"woff\");\n}\n\n@font-face {\n  font-family: Inter;\n  font-style: normal;\n  font-weight: 700;\n  font-display: swap;\n  src: url(\"../Inter-Bold.af5441a3.woff2\") format(\"woff2\"), url(\"../Inter-Bold.419e8c71.woff\") format(\"woff\");\n}\n\n:root {\n  --max-screen: 83.25;\n  --fc-screen: 100vw;\n  --fc-bp: calc((var(--fc-screen)  - 20em)  / (var(--max-screen)  - 20) );\n  --fc-base: 18;\n  --fc-3xs: 4.5;\n  --space-3xs: calc(var(--fc-3xs)  / 16 * 1rem);\n  --fc-2xs: 9;\n  --space-2xs: calc(var(--fc-2xs)  / 16 * 1rem);\n  --fc-xs: 13.5;\n  --space-xs: calc(var(--fc-xs)  / 16 * 1rem);\n  --fc-s: 18;\n  --space-s: calc(var(--fc-s)  / 16 * 1rem);\n  --fc-m: 27;\n  --space-m: calc(var(--fc-m)  / 16 * 1rem);\n  --fc-l: 36;\n  --space-l: calc(var(--fc-l)  / 16 * 1rem);\n  --fc-xl: 54;\n  --space-xl: calc(var(--fc-xl)  / 16 * 1rem);\n  --fc-2xl: 72;\n  --space-2xl: calc(var(--fc-2xl)  / 16 * 1rem);\n  --fc-3xl: 108;\n  --space-3xl: calc(var(--fc-3xl)  / 16 * 1rem);\n  --fc-4xl: 144;\n  --space-4xl: calc(var(--fc-4xl)  / 16 * 1rem);\n  --space--3xs: calc( ((var(--fc-)  / 16)  * 1rem)  + (var(--fc-3xs)  - var(--fc-) )  * var(--fluid-bp) );\n  --space-3xs-2xs: calc( ((var(--fc-3xs)  / 16)  * 1rem)  + (var(--fc-2xs)  - var(--fc-3xs) )  * var(--fluid-bp) );\n  --space-2xs-xs: calc( ((var(--fc-2xs)  / 16)  * 1rem)  + (var(--fc-xs)  - var(--fc-2xs) )  * var(--fluid-bp) );\n  --space-xs-s: calc( ((var(--fc-xs)  / 16)  * 1rem)  + (var(--fc-s)  - var(--fc-xs) )  * var(--fluid-bp) );\n  --space-s-m: calc( ((var(--fc-s)  / 16)  * 1rem)  + (var(--fc-m)  - var(--fc-s) )  * var(--fluid-bp) );\n  --space-m-l: calc( ((var(--fc-m)  / 16)  * 1rem)  + (var(--fc-l)  - var(--fc-m) )  * var(--fluid-bp) );\n  --space-l-xl: calc( ((var(--fc-l)  / 16)  * 1rem)  + (var(--fc-xl)  - var(--fc-l) )  * var(--fluid-bp) );\n  --space-xl-2xl: calc( ((var(--fc-xl)  / 16)  * 1rem)  + (var(--fc-2xl)  - var(--fc-xl) )  * var(--fluid-bp) );\n  --space-2xl-3xl: calc( ((var(--fc-2xl)  / 16)  * 1rem)  + (var(--fc-3xl)  - var(--fc-2xl) )  * var(--fluid-bp) );\n  --space-3xl-4xl: calc( ((var(--fc-3xl)  / 16)  * 1rem)  + (var(--fc-4xl)  - var(--fc-3xl) )  * var(--fluid-bp) );\n  --space-s-l: calc( ((var(--fc-s)  / 16)  * 1rem)  + (var(--fc-l)  - var(--fc-s) )  * var(--fluid-bp) );\n  --space-s-m: calc( ((var(--fc-s)  / 16)  * 1rem)  + (var(--fc-m)  - var(--fc-s) )  * var(--fluid-bp) );\n  --space-xs-l: calc( ((var(--fc-xs)  / 16)  * 1rem)  + (var(--fc-l)  - var(--fc-xs) )  * var(--fluid-bp) );\n  --space-m-xl: calc( ((var(--fc-m)  / 16)  * 1rem)  + (var(--fc-xl)  - var(--fc-m) )  * var(--fluid-bp) );\n  --space-l-2xl: calc( ((var(--fc-l)  / 16)  * 1rem)  + (var(--fc-2xl)  - var(--fc-l) )  * var(--fluid-bp) );\n  --space-s-xl: calc( ((var(--fc-s)  / 16)  * 1rem)  + (var(--fc-xl)  - var(--fc-s) )  * var(--fluid-bp) );\n  --space-l-3xl: calc( ((var(--fc-l)  / 16)  * 1rem)  + (var(--fc-3xl)  - var(--fc-l) )  * var(--fluid-bp) );\n  --space-xl-3xl: calc( ((var(--fc-xl)  / 16)  * 1rem)  + (var(--fc-3xl)  - var(--fc-xl) )  * var(--fluid-bp) );\n  --space-l-4xl: calc( ((var(--fc-l)  / 16)  * 1rem)  + (var(--fc-4xl)  - var(--fc-l) )  * var(--fluid-bp) );\n  --space-3xs-m: calc( ((var(--fc-3xs)  / 16)  * 1rem)  + (var(--fc-m)  - var(--fc-3xs) )  * var(--fluid-bp) );\n  --gutter: var(--space-s-l);\n}\n\n@media screen and (min-width: 75em) {\n  :root {\n    --fc-screen: calc(var(--max-screen)  * 1rem);\n  }\n}\n\n*, :before, :after {\n  box-sizing: border-box;\n}\n\nbody {\n  min-height: 100vh;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: stretch;\n  margin: 0;\n  display: flex;\n}\n\nhtml {\n  scroll-behavior: smooth;\n}\n\nblockquote, pre, ol, ul, figure {\n  margin: 0;\n  padding: 0;\n}\n\nimg {\n  max-width: 100%;\n  height: auto;\n  border: none;\n  display: block;\n}\n\narticle, aside, figure, footer, header, aside, main, nav {\n  display: block;\n}\n\niframe {\n  border: none;\n}\n\nbody {\n  letter-spacing: -.01em;\n  font: 400 18px / 1.2 Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;\n  font-size: var(--step-0);\n  color: #333;\n}\n\nh1, h2, h3, h4, h5, h6, p, ul, ol, dl {\n  margin: 0;\n}\n\nul, ol, p {\n  line-height: 1.2;\n}\n\na {\n  text-decoration: none;\n}\n\na, a:hover {\n  cursor: pointer;\n  color: inherit;\n}\n\n.mp ol, .mp ul {\n  list-style: none;\n}\n\ncite, address {\n  font-style: normal;\n}\n\n[type=\"submit\"], [type=\"button\"], button {\n  box-shadow: none;\n  appearance: none;\n  cursor: pointer;\n  color: inherit;\n  font: inherit;\n  background: none;\n  border: none;\n  border-radius: 0;\n  padding: 0;\n}\n\n[disabled], .mp.c-button[disabled] {\n  opacity: .5;\n  cursor: not-allowed;\n}\n\nlabel {\n  cursor: pointer;\n}\n\nfieldset {\n  border: none;\n  padding: .01em 0 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  * {\n    scroll-behavior: auto !important;\n    transition: none !important;\n    animation: none !important;\n  }\n}\n\ncode[class*=\"language-\"], pre[class*=\"language-\"] {\n  text-align: left;\n  white-space: pre;\n  word-spacing: normal;\n  word-break: normal;\n  word-wrap: normal;\n  color: #3d7b87;\n  tab-size: 4;\n  -webkit-hyphens: none;\n  hyphens: none;\n  background: #ebf1f2;\n  font-family: Source Code Pro, monospace;\n  font-size: 1rem;\n  line-height: 1.5em;\n}\n\ncode[class*=\"language-\"]::selection, pre[class*=\"language-\"]::selection, code[class*=\"language-\"] ::selection, pre[class*=\"language-\"] ::selection {\n  color: #263238;\n  background: #cceae7;\n}\n\n:not(pre) > code[class*=\"language-\"] {\n  white-space: normal;\n  border-radius: .2em;\n  padding: .1em;\n}\n\npre[class*=\"language-\"] {\n  padding: 18px;\n  padding: var(--space-s);\n  position: relative;\n  overflow: auto;\n}\n\n.language-css > code, .language-sass > code, .language-scss > code {\n  color: #f2a60d;\n}\n\n[class*=\"language-\"] .namespace {\n  opacity: .7;\n}\n\n.token.atrule {\n  color: #3d7b87;\n}\n\n.token.attr-name {\n  color: #00a2c2;\n}\n\n.token.attr-value, .token.attribute {\n  color: #13aa13;\n}\n\n.token.boolean {\n  color: #ce0058;\n}\n\n.token.builtin, .token.cdata, .token.char, .token.class {\n  color: #00a2c2;\n}\n\n.token.class-name {\n  color: #6182b8;\n}\n\n.token.comment {\n  color: #aabfc9;\n}\n\n.token.constant {\n  color: #3d7b87;\n}\n\n.token.deleted {\n  color: #ce0058;\n}\n\n.token.doctype {\n  color: #aabfc9;\n}\n\n.token.entity {\n  color: #ce0058;\n}\n\n.token.function {\n  color: #3d7b87;\n}\n\n.token.hexcode {\n  color: #f2a60d;\n}\n\n.token.id, .token.important {\n  color: #3d7b87;\n  font-weight: bold;\n}\n\n.token.inserted {\n  color: #00a2c2;\n}\n\n.token.keyword {\n  color: #3d7b87;\n}\n\n.token.number {\n  color: #f2a60d;\n}\n\n.token.operator {\n  color: #00a2c2;\n}\n\n.token.prolog {\n  color: #aabfc9;\n}\n\n.token.property {\n  color: #00a2c2;\n}\n\n.token.pseudo-class, .token.pseudo-element {\n  color: #13aa13;\n}\n\n.token.punctuation, .token.regex {\n  color: #00a2c2;\n}\n\n.token.selector {\n  color: #ce0058;\n}\n\n.token.string {\n  color: #13aa13;\n}\n\n.token.symbol {\n  color: #3d7b87;\n}\n\n.token.tag {\n  color: #005461;\n}\n\n.token.unit {\n  color: #f2a60d;\n}\n\n.token.url, .token.variable {\n  color: #ce0058;\n}\n\n.u-hr, .c-library hr, .o-prose hr {\n  padding-bottom: 27px;\n  padding-bottom: var(--space-m-xl);\n  margin: 0 0 27px;\n  margin-bottom: var(--space-m-xl);\n  border: none;\n  border-bottom: 1px solid #bfd3d6;\n}\n\n.u-border-top {\n  border-top: 1px solid #bfd3d6;\n}\n\n.u-border-bottom {\n  border-bottom: 1px solid #bfd3d6;\n}\n\n.u-border {\n  border: 1px solid #bfd3d6;\n}\n\n.o-grid {\n  margin-bottom: -18px;\n  margin-bottom: calc(-1 * var(--gutter) );\n  width: 100%;\n  flex-wrap: wrap;\n  justify-content: stretch;\n  display: flex;\n}\n\n.o-grid--float:after {\n  content: \" \";\n  clear: both;\n  display: table;\n}\n\n.o-grid--between {\n  justify-content: space-between;\n}\n\n.o-grid--no-height-match {\n  align-items: start;\n}\n\n.o-grid > * {\n  width: 100%;\n  margin-bottom: 18px;\n  margin-bottom: var(--gutter);\n}\n\n@media (min-width: 40em) {\n  .o-grid--of-two > * {\n    width: calc(50% - (($ columns - 1)  * 18px / $ columns)  - .1px);\n    width: calc(50% - 1 * var(--gutter)  / 2 - .1px);\n  }\n\n  .o-grid--of-two > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-two > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 55em) {\n  .o-grid--of-two-late > * {\n    width: calc(50% - (($ columns - 1)  * 18px / $ columns)  - .1px);\n    width: calc(50% - 1 * var(--gutter)  / 2 - .1px);\n  }\n\n  .o-grid--of-two-late > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-two-late > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 22.4em) {\n  .o-grid--of-two-early > * {\n    width: calc(50% - (($ columns - 1)  * 18px / $ columns)  - .1px);\n    width: calc(50% - 1 * var(--gutter)  / 2 - .1px);\n  }\n\n  .o-grid--of-two-early > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-two-early > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 38em) and (max-width: 54.9375em) {\n  .o-grid--of-three > * {\n    width: calc(50% - (($ columns - 1)  * 18px / $ columns)  - .1px);\n    width: calc(50% - 1 * var(--gutter)  / 2 - .1px);\n  }\n\n  .o-grid--of-three > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-three > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 55em) {\n  .o-grid--of-three > * {\n    width: calc(33.3333% - (($ columns - 1)  * 18px / $ columns)  - .1px);\n    width: calc(33.3333% - 2 * var(--gutter)  / 3 - .1px);\n  }\n\n  .o-grid--of-three > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-three > :nth-child(3n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 38em) and (max-width: 67.9375em) {\n  .o-grid--of-three-late > * {\n    width: calc(50% - (($ columns - 1)  * 18px / $ columns)  - .1px);\n    width: calc(50% - 1 * var(--gutter)  / 2 - .1px);\n  }\n\n  .o-grid--of-three-late > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-three-late > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 68em) {\n  .o-grid--of-three-late > * {\n    width: calc(33.3333% - (($ columns - 1)  * 18px / $ columns)  - .1px);\n    width: calc(33.3333% - 2 * var(--gutter)  / 3 - .1px);\n  }\n\n  .o-grid--of-three-late > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-three-late > :nth-child(3n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 22.4em) and (max-width: 54.9375em) {\n  .o-grid--of-three-early > * {\n    width: calc(50% - (($ columns - 1)  * 18px / $ columns)  - .1px);\n    width: calc(50% - 1 * var(--gutter)  / 2 - .1px);\n  }\n\n  .o-grid--of-three-early > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-three-early > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 55em) {\n  .o-grid--of-three-early > * {\n    width: calc(33.3333% - (($ columns - 1)  * 18px / $ columns)  - .1px);\n    width: calc(33.3333% - 2 * var(--gutter)  / 3 - .1px);\n  }\n\n  .o-grid--of-three-early > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-three-early > :nth-child(3n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 38em) and (max-width: 59.9375em) {\n  .o-grid--of-four > * {\n    width: calc(50% - (($ columns - 1)  * 18px / $ columns)  - .1px);\n    width: calc(50% - 1 * var(--gutter)  / 2 - .1px);\n  }\n\n  .o-grid--of-four > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-four > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 60em) {\n  .o-grid--of-four > * {\n    width: calc(25% - (($ columns - 1)  * 18px / $ columns)  - .1px);\n    width: calc(25% - 3 * var(--gutter)  / 4 - .1px);\n  }\n\n  .o-grid--of-four > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-four > :nth-child(4n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 22.4em) and (max-width: 59.9375em) {\n  .o-grid--of-four-early > * {\n    width: calc(50% - (($ columns - 1)  * 18px / $ columns)  - .1px);\n    width: calc(50% - 1 * var(--gutter)  / 2 - .1px);\n  }\n\n  .o-grid--of-four-early > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-four-early > :nth-child(2n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (min-width: 60em) {\n  .o-grid--of-four-early > * {\n    width: calc(25% - (($ columns - 1)  * 18px / $ columns)  - .1px);\n    width: calc(25% - 3 * var(--gutter)  / 4 - .1px);\n  }\n\n  .o-grid--of-four-early > * + * {\n    margin-left: 18px;\n    margin-left: var(--gutter);\n  }\n\n  .o-grid--of-four-early > :nth-child(4n+1) {\n    margin-left: 0;\n  }\n}\n\n@media (max-width: 54.9375em) {\n  .o-grid--swipeable {\n    left: 50%;\n    left: calc(50% + var(--scrollbarWidth)  / 2.0001);\n    width: 100vw;\n    width: calc(100vw - var(--scrollbarWidth) );\n    padding-left: var(--gutter);\n    padding-right: var(--gutter);\n    scroll-snap-type: x mandatory;\n    scroll-padding: var(--gutter);\n    -webkit-overflow-scrolling: touch;\n    flex-wrap: nowrap;\n    position: relative;\n    overflow-x: scroll;\n    transform: translateX(-50vw);\n  }\n\n  .o-grid--swipeable > * {\n    max-width: 23em;\n    width: calc(85vw - var(--gutter)  * 2.333);\n    scroll-snap-align: start;\n    scroll-snap-stop: always;\n    flex: none;\n  }\n\n  .o-grid--swipeable > * + * {\n    margin-left: var(--gutter) !important;\n  }\n}\n\n@media (min-width: 55em) {\n  .o-grid--4\\/7 > :nth-child(2n+2), .o-grid--4\\/7-switch > :nth-child(2n+2) {\n    width: 57.1429%;\n  }\n\n  .o-grid--9\\/3 > :nth-child(2n+1), .o-grid--8\\/3 > :nth-child(2n+1), .o-grid--8\\/4 > :nth-child(2n+1), .o-grid--3\\/9 > :nth-child(2n+2), .o-grid--3\\/8 > :nth-child(2n+2), .o-grid--4\\/8 > :nth-child(2n+2), .o-grid--9\\/3-switch > :nth-child(2n+2), .o-grid--8\\/3-switch > :nth-child(2n+2), .o-grid--8\\/4-switch > :nth-child(2n+2), .o-grid--3\\/9-switch > :nth-child(2n+1), .o-grid--3\\/8-switch > :nth-child(2n+1), .o-grid--4\\/8-switch > :nth-child(2n+1) {\n    width: 65.7143%;\n  }\n\n  .o-grid--9\\/3 > :nth-child(2n+2), .o-grid--8\\/3 > :nth-child(2n+2), .o-grid--8\\/4 > :nth-child(2n+2), .o-grid--3\\/9 > :nth-child(2n+1), .o-grid--3\\/8 > :nth-child(2n+1), .o-grid--4\\/8 > :nth-child(2n+1), .o-grid--4\\/7 > :nth-child(2n+1), .o-grid--9\\/3-switch > :nth-child(2n+1), .o-grid--8\\/3-switch > :nth-child(2n+1), .o-grid--8\\/4-switch > :nth-child(2n+1), .o-grid--3\\/9-switch > :nth-child(2n+2), .o-grid--3\\/8-switch > :nth-child(2n+2), .o-grid--4\\/8-switch > :nth-child(2n+2), .o-grid--4\\/7-switch > :nth-child(2n+1) {\n    width: 31.4286%;\n  }\n\n  .o-grid--3\\/9 > :nth-child(2n+2), .o-grid--3\\/8 > :nth-child(2n+2), .o-grid--4\\/8 > :nth-child(2n+2), .o-grid--9\\/3 > :nth-child(2n+2), .o-grid--8\\/3 > :nth-child(2n+2), .o-grid--8\\/4 > :nth-child(2n+2), .o-grid--9\\/3-switch > :nth-child(2n+1), .o-grid--8\\/3-switch > :nth-child(2n+1), .o-grid--8\\/4-switch > :nth-child(2n+1), .o-grid--3\\/9-switch > :nth-child(2n+1), .o-grid--3\\/8-switch > :nth-child(2n+1), .o-grid--4\\/8-switch > :nth-child(2n+1) {\n    margin-left: 2.85714%;\n    margin-right: 0;\n  }\n\n  .o-grid--8\\/3 > :nth-child(2n+1), .o-grid--3\\/8 > :nth-child(2n+2), .o-grid--8\\/3-switch > :nth-child(2n+2), .o-grid--3\\/8-switch > :nth-child(2n+1) {\n    max-width: 828px;\n  }\n\n  .o-grid[class*=\"switch\"] > :nth-child(2n+1) {\n    order: 1;\n  }\n\n  .o-grid--layout, .o-grid--layout > :nth-last-child(1), .o-grid--layout > :nth-last-child(2) {\n    margin-bottom: 0;\n  }\n\n  .o-grid--push {\n    justify-content: space-between;\n  }\n\n  .o-grid--pull {\n    justify-content: flex-start;\n  }\n\n  .o-grid--float {\n    display: block;\n  }\n\n  .o-grid--float:not([class*=\"switch\"]) > :nth-child(2n+1), .o-grid--float[class*=\"switch\"] > :nth-child(2n+2) {\n    float: left;\n  }\n\n  .o-grid--float:not([class*=\"switch\"]) > :nth-child(2n+2), .o-grid--float[class*=\"switch\"] > :nth-child(2n+1) {\n    float: right;\n  }\n}\n\n@media (min-width: 70em) {\n  .o-grid--9\\/3 > :nth-child(2n+1), .o-grid--8\\/3 > :nth-child(2n+1), .o-grid--3\\/9 > :nth-child(2n+2), .o-grid--3\\/8 > :nth-child(2n+2), .o-grid--9\\/3-switch > :nth-child(2n+2), .o-grid--8\\/3-switch > :nth-child(2n+2), .o-grid--3\\/9-switch > :nth-child(2n+1), .o-grid--3\\/8-switch > :nth-child(2n+1) {\n    width: 74.2857%;\n  }\n\n  .o-grid--9\\/3 > :nth-child(2n+2), .o-grid--8\\/3 > :nth-child(2n+2), .o-grid--3\\/9 > :nth-child(2n+1), .o-grid--3\\/8 > :nth-child(2n+1), .o-grid--9\\/3-switch > :nth-child(2n+1), .o-grid--8\\/3-switch > :nth-child(2n+1), .o-grid--3\\/9-switch > :nth-child(2n+2), .o-grid--3\\/8-switch > :nth-child(2n+2) {\n    width: 22.8571%;\n  }\n}\n\n.c-library {\n  min-height: 100vh;\n  grid-template-rows: auto 1fr auto;\n  display: grid;\n}\n\n.c-library--components {\n  grid-template-rows: auto 1fr;\n}\n\n.c-library__header {\n  letter-spacing: -.01em;\n  font-size: 15px;\n  font-size: var(--step--1);\n  padding: 9px;\n  padding: var(--space-2xs);\n  color: #fff;\n  background: #005461;\n  flex-direction: column;\n  align-items: flex-start;\n  font-weight: 700;\n}\n\n@media only screen and (min-width: 650px) {\n  .c-library__header {\n    letter-spacing: -.01em;\n    font-size: 12.5px;\n    font-size: var(--step--2);\n    flex-direction: row;\n    align-items: center;\n  }\n}\n\n@media only screen and (min-width: 1000px) {\n  .c-library__header {\n    letter-spacing: -.01em;\n    font-size: 15px;\n    font-size: var(--step--1);\n    padding: 18px;\n    padding: var(--space-s) var(--space-s-l);\n  }\n}\n\n.c-library__header img {\n  filter: saturate(0) brightness(10);\n}\n\n.c-library__header .c-library-page-active {\n  position: relative;\n}\n\n.c-library__header .c-library-page-active:after {\n  content: \"\";\n  width: 100%;\n  border-bottom: 1px solid ;\n  position: absolute;\n  bottom: -6px;\n  left: 0;\n}\n\n.c-library__hero {\n  color: #fff;\n  background: linear-gradient(#005461, #0000), linear-gradient(45deg, #00a2c2, #005461);\n}\n\n.c-library__body {\n  grid-template-rows: auto auto;\n  display: grid;\n}\n\n@media only screen and (min-width: 600px) {\n  .c-library__body {\n    grid-template-columns: 10em 1fr;\n  }\n}\n\n@media only screen and (min-width: 800px) {\n  .c-library__body {\n    grid-template-columns: 17em 1fr;\n  }\n}\n\n@media only screen and (min-width: 600px) {\n  .c-library--components .c-library__body > * {\n    height: calc(100vh - var(--headerHeight)  - 1px);\n    overflow-y: scroll;\n  }\n}\n\n.c-library__sidebar {\n  letter-spacing: -.01em;\n  font-size: 12.5px;\n  font-size: var(--step--2);\n  scroll-behavior: none;\n  border-right: 1px solid #ebf1f2;\n  grid-row: -1;\n}\n\n@media only screen and (min-width: 600px) {\n  .c-library__sidebar {\n    grid-row: auto;\n  }\n}\n\n@media only screen and (min-width: 800px) {\n  .c-library__sidebar {\n    letter-spacing: -.01em;\n    font-size: 15px;\n    font-size: var(--step--1);\n  }\n}\n\n.c-library__sidebar > * {\n  padding: 18px;\n  padding: var(--space-s-l) var(--space-s) var(--space-s-l) var(--space-s-l);\n}\n\n.c-library__sidebar li {\n  position: relative;\n}\n\n.c-library__sidebar li a {\n  color: #006daf;\n}\n\n.c-library__sidebar li a:hover {\n  color: #006daf;\n  text-decoration: underline;\n}\n\n.c-library__sidebar li + li {\n  margin-top: 13.5px;\n  margin-top: var(--space-xs);\n}\n\n.c-library__sidebar ul ul {\n  padding: 13.5px;\n  padding: var(--space-xs);\n  padding-bottom: 0;\n}\n\n.c-library__sidebar ul ul li + li {\n  margin-top: 9px;\n  margin-top: var(--space-2xs);\n}\n\n.c-library__skip-link {\n  padding: 13.5px;\n  padding: var(--space-xs);\n}\n\n@media only screen and (min-width: 600px) {\n  .c-library__skip-link {\n    display: none;\n  }\n}\n\n.c-library__logo {\n  max-width: 15%;\n  min-width: 100px;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n@media only screen and (min-width: 650px) {\n  .c-library__logo {\n    justify-content: flex-start;\n  }\n}\n\n.c-library__logo-name {\n  padding-left: 13.5px;\n  padding-left: var(--space-xs-s);\n  margin-left: 13.5px;\n  margin-left: var(--space-xs-s);\n  white-space: nowrap;\n  border-left: 1px solid #3d7b87;\n}\n\n.c-library__logo-name span {\n  display: block;\n}\n\n.c-library__logo-name span:nth-last-child(3), .c-library__logo-name span:nth-last-child(1) {\n  text-transform: uppercase;\n  letter-spacing: -.01em;\n  font-size: 15px;\n  font-size: var(--step--1);\n  letter-spacing: .08em;\n  color: #bfd3d6;\n}\n\n.c-library__logo-name span:nth-last-child(2) {\n  color: #fff;\n  letter-spacing: -.03em;\n  font-size: 37.32px;\n  font-size: var(--step-4);\n}\n\n.c-library__logo-name span:nth-last-child(3) {\n  color: #3d7b87;\n}\n\n.has-js .c-library__sidebar ul > li > ul {\n  display: none;\n}\n\n.has-js .c-library__sidebar ul > .c-library-accordion-open > ul {\n  display: block;\n}\n\n.c-library .c-library-accordion-open > .c-library-accordion__toggle {\n  transform: rotate(180deg);\n}\n\n.c-library .c-library-accordion__toggle {\n  color: #006daf;\n  justify-content: center;\n  align-items: center;\n  padding: .25rem;\n  font-size: 1rem;\n  line-height: 1;\n  display: flex;\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n\n.c-library-menu-active {\n  font-weight: 700;\n  position: relative;\n}\n\n.c-library-menu-active:before {\n  content: \"▸ \";\n  position: absolute;\n  top: 0;\n  left: -17px;\n}\n\n.c-library-stretch {\n  flex-direction: column;\n  flex: 1;\n  display: flex;\n}\n\n.c-library__main {\n  overflow-y: auto;\n}\n\n@media only screen and (min-width: 600px) {\n  .c-library__main {\n    overflow-y: scroll;\n  }\n}\n\n.c-library__frame {\n  width: 100%;\n  position: relative;\n}\n\n.c-library__frame-links {\n  right: 0;\n  top: calc(-1 * (var(--space-m)  + var(--space-s) ) );\n  z-index: 1;\n  position: absolute;\n}\n\n.c-library__frame-links a, .c-library__frame-links button {\n  letter-spacing: -.01em;\n  font-size: 15px;\n  font-size: var(--step--1);\n  color: #959595;\n  background: #bfd3d6;\n  border-radius: 0 0 .25em .25em;\n  padding: .25em .666em;\n}\n\n.c-library__frame-background {\n  border-radius: 0 0 0 .25em;\n  top: 0;\n}\n\n.c-library__frame iframe {\n  height: 100%;\n  width: 100%;\n  transition: all .3s cubic-bezier(.22, .61, .36, 1);\n  top: 0;\n  left: 0;\n}\n\n@media only screen and (min-width: 600px) {\n  .c-library__frame iframe {\n    position: absolute;\n  }\n}\n\n.c-library-code {\n  font-family: Source Code Pro;\n}\n\n.c-library-pre {\n  padding: 18px;\n  padding: var(--space-s);\n  background: #ebf1f2;\n  font-family: Source Code Pro;\n  line-height: 1.4;\n  overflow-x: auto;\n}\n\n.c-library-pre--bordered {\n  border-bottom: 1px solid #bfd3d6;\n}\n\n.c-library-version {\n  letter-spacing: -.01em;\n  font-size: 15px;\n  font-size: var(--step--1);\n  color: #959595;\n}\n\n.c-library-status {\n  letter-spacing: -.01em;\n  font-size: 15px;\n  font-size: var(--step--1);\n  color: #959595;\n  background: #bfd3d6;\n  border-radius: .25em;\n  padding: .25em .666em;\n}\n\n.c-library-status--ready {\n  color: #fff;\n  background: #13aa13;\n}\n\n.c-library-status--in-production, .c-library-status--development, .c-library-status--placeholder {\n  color: #fff;\n  background: #f2a60d;\n}\n\n.c-library-status--deprecated {\n  color: #fff;\n  background: #ce0058;\n}\n\n.c-library__swatch-grid {\n  margin-bottom: var(--space-m);\n  grid-auto-rows: minmax(4em, auto);\n  gap: 0 1em;\n  display: grid;\n}\n\n@media only screen and (min-width: 680px) {\n  .c-library__swatch-grid {\n    grid-template-rows: 5em auto;\n    grid-template-columns: repeat(5, auto);\n    gap: 0;\n  }\n}\n\n.c-library__swatch-grid--has-labels {\n  grid-auto-flow: row;\n}\n\n@media only screen and (min-width: 40em) {\n  .c-library__swatch-grid--has-labels {\n    grid-template-rows: auto;\n    grid-template-columns: minmax(15%, 15em) auto;\n  }\n}\n\n@media only screen and (min-width: 1000px) {\n  .c-library__swatch-grid--has-labels {\n    grid-template-rows: 5em auto;\n    grid-template-columns: repeat(5, 1fr);\n    grid-auto-flow: column;\n  }\n}\n\n.c-library__swatches, .c-library__swatch-labels {\n  grid-template-columns: repeat(auto-fit, 165px);\n  display: grid;\n}\n\n.c-library__swatch {\n  display: flex;\n}\n\n.c-library__swatch > * {\n  justify-content: center;\n  margin: auto;\n  font-weight: 700;\n}\n\n.c-library__swatches > * {\n  height: 0;\n  padding-bottom: 50%;\n  position: relative;\n}\n\n.c-library__swatches > * > * {\n  text-align: center;\n  height: 100%;\n  width: 100%;\n  justify-content: center;\n  align-items: center;\n  padding: .5rem;\n  font-weight: 700;\n  display: flex;\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\n.c-library__swatch-grid table {\n  letter-spacing: -.01em;\n  font-size: 12.5px;\n  font-size: var(--step--2);\n}\n\n.c-library__swatch-grid table td, .c-library__swatch-grid table th {\n  padding: 9px 0 9px 4.5px;\n  padding: var(--space-2xs) 0 var(--space-2xs) var(--space-3xs);\n}\n\n.c-library__swatch-grid table th {\n  width: 3em;\n}\n\n.c-library__swatch-grid table td {\n  font-family: monospace;\n}\n\n.c-library__image-row {\n  max-width: 100%;\n  display: flex;\n}\n\n.c-library__image-row img {\n  object-fit: contain;\n  width: 6%;\n  flex: auto;\n  margin: 0 2% 0 0;\n}\n\n.c-library__image-row img:last-child {\n  margin-right: 0;\n}\n\n.c-library__space {\n  display: block;\n}\n\n.c-library__space span {\n  height: 0;\n  background: linear-gradient(45deg, #fff3 0%, #fff0 100%), #ce005880;\n  padding-bottom: 100%;\n  display: block;\n  position: relative;\n}\n\n.c-library__space code {\n  margin-left: 18px;\n  margin-left: var(--space-s);\n  white-space: nowrap;\n  line-height: 1;\n  position: absolute;\n  top: 50%;\n  left: 100%;\n  transform: translateY(-50%);\n}\n\n.c-library-grid {\n  color: #fff;\n  letter-spacing: -.01em;\n  font-size: 15px;\n  font-size: var(--step--1);\n  background: #00758c;\n  justify-content: center;\n  align-items: center;\n  padding: 3rem 1rem;\n  display: flex;\n}\n\n.c-library-grid--alt {\n  background: #3d7b87;\n  padding: 2rem 1rem;\n}\n\n.c-library-grid--alt:before {\n  content: \" \";\n  display: block;\n}\n\n.c-library-grid--first {\n  background: #005461;\n  padding: 2rem 1rem;\n}\n\n.c-library-grid--first:before {\n  content: \"First on mobile\";\n}\n\n.c-library-copy {\n  position: relative;\n}\n\n.c-library-copy__trigger {\n  letter-spacing: -.01em;\n  font-size: 15px;\n  font-weight: 700;\n  font-size: var(--step--1);\n  padding: 4.5px 9px;\n  padding: var(--space-3xs) var(--space-2xs);\n  letter-spacing: .02em;\n  background: #bfd3d6;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n}\n\n.c-library-copy__trigger:hover {\n  color: #ce0058;\n}\n\n.c-library__typo__sidebar {\n  width: 14.2857%;\n}\n\n.c-library__typo__sidebar span {\n  display: block;\n}\n\n.c-library__typo__sidebar .x2 {\n  height: 2em;\n  border: 1px solid #333;\n  border-width: 1px 0;\n  margin-top: 4.25em;\n  line-height: 2em;\n}\n\n.c-library__typo__main {\n  width: 82.8572%;\n}\n\n.c-library__semi {\n  font-weight: 600;\n}\n\n.c-library__photo-grid {\n  margin-top: 54px;\n  margin-top: var(--space-xl);\n  grid-template-columns: 1fr;\n  gap: 2px;\n  display: grid;\n}\n\n@media only screen and (min-width: 880px) {\n  .c-library__photo-grid {\n    grid-auto-flow: dense;\n    grid-auto-rows: auto;\n  }\n\n  .c-library__photo-grid img {\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n  }\n\n  .c-library__photo-grid div {\n    grid-area: 1 / 1 / 2 / 3;\n    display: flex;\n  }\n\n  .c-library__photo-grid div h2 {\n    margin: auto var(--space-s);\n  }\n\n  .c-library__photo-grid.grid-1 {\n    grid-template-columns: 40% 20% 40%;\n    grid-template-rows: var(--space-2xl) 400px 400px;\n  }\n\n  .c-library__photo-grid.grid-1 img:nth-child(2) {\n    grid-area: 2 / 1 / 3 / 3;\n  }\n\n  .c-library__photo-grid.grid-1 img:nth-child(3) {\n    grid-area: 1 / 3 / 3 / 4;\n  }\n\n  .c-library__photo-grid.grid-1 img:nth-child(5) {\n    grid-column: 2 / 4;\n  }\n\n  .c-library__photo-grid.grid-2 {\n    grid-template-columns: 50% 50%;\n    grid-template-rows: var(--space-2xl) 300px 300px;\n  }\n\n  .c-library__photo-grid.grid-2 div {\n    grid-column: 1 / 2;\n  }\n\n  .c-library__photo-grid.grid-2 img:nth-child(2) {\n    grid-row: 2 / 4;\n  }\n\n  .c-library__photo-grid.grid-2 img:nth-child(3) {\n    grid-row: 1 / 3;\n  }\n}\n\n.c-library__illustration-grid {\n  gap: var(--gutter);\n  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n  display: grid;\n}\n\n.c-library__illustration-grid :nth-child(2n+1):nth-last-child(3) {\n  grid-column: 1 / -1;\n}\n\n.c-library .c-alert ul li {\n  margin-left: 1em;\n  padding-left: .5rem;\n  list-style: outside url(\"data:image/svg+xml;utf8,<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"8\\\" height=\\\"20\\\" viewBox=\\\"0 0 10 20\\\"><circle cx=\\\"5\\\" cy=\\\"14\\\" r=\\\"3.5\\\" fill=\\\"%2313AA13\\\" fill-rule=\\\"evenodd\\\"/></svg>\");\n}\n\n.c-library .c-alert ul li h3, .c-library .c-alert ul li h4 {\n  color: #13aa13;\n  font-size: 1em;\n  line-height: 1.6;\n}\n\n@media only screen and (max-width: 1050px) {\n  .c-library__logo-name span:nth-last-child(3), .c-library__logo-name span:nth-last-child(1) {\n    letter-spacing: -.01em;\n    font-size: 12.5px;\n    font-size: var(--step--2);\n  }\n\n  .c-library__logo-name span:nth-last-child(2) {\n    letter-spacing: -.02em;\n    font-size: 21.6px;\n    font-size: var(--step-1);\n  }\n\n  .c-library__header nav li:last-child {\n    display: none;\n  }\n}\n\n@media only screen and (min-width: 650px) and (max-width: 700px), screen and (max-width: 450px) {\n  .c-library__header nav .u-row {\n    gap: 9px;\n    gap: var(--space-2xs);\n    letter-spacing: -.01em;\n    font-size: 12.5px;\n    font-size: var(--step--2);\n  }\n}\n\n@media only screen and (max-width: 650px) {\n  .c-library__header nav a {\n    padding: 9px 0;\n    padding: var(--space-2xs) 0;\n    display: block;\n  }\n\n  .c-library__header .c-library-page-active:after {\n    bottom: 4.5px;\n    bottom: var(--space-3xs);\n  }\n}\n\n/*# sourceMappingURL=library.css.map */\n","@import './tools';\r\n@import './foundations';\r\n@import './elements/reset';\r\n@import './objects/syntax-highlighting';\r\n@import './utilities/hr.scss';\r\n@import './objects/grid';\r\n\r\n@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');\r\n\r\n.c-library {\r\n  display: grid;\r\n  min-height: 100vh;\r\n  grid-template-rows: auto 1fr auto;\r\n  \r\n  &--components {\r\n    grid-template-rows: auto 1fr;\r\n  }\r\n\r\n  &__header {\r\n    @include step(-1);\r\n    @include padding('2xs');\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    \r\n    background: color('petrol');\r\n    color: color('white');\r\n    font-weight: weight('bold');\r\n    \r\n    @media only screen and (min-width:650px) {\r\n      @include step(-2);\r\n      flex-direction: row;\r\n      align-items: center;\r\n    }\r\n\r\n    @media only screen and (min-width:1000px) {\r\n      @include step(-1);\r\n      @include padding('s', 's-l');\r\n    }\r\n\r\n    img {\r\n      filter: saturate(0) brightness(10);\r\n    }\r\n\r\n    .c-library-page-active {\r\n      position: relative;\r\n\r\n      &:after {\r\n        content: '';\r\n        position: absolute;\r\n        left: 0;\r\n        width: 100%;\r\n        bottom: -6px;\r\n        border-bottom: 1px solid;\r\n      }\r\n    }\r\n  }\r\n\r\n  &__hero {\r\n    color: white;\r\n    background: linear-gradient(color('petrol'), transparent), linear-gradient(45deg, color('blue'), color('petrol'));\r\n  }\r\n\r\n  &__body {\r\n    display: grid;\r\n    grid-template-rows: auto auto;\r\n\r\n    @media only screen and (min-width: 600px) {\r\n      grid-template-columns: 10em 1fr;\r\n    }\r\n    \r\n    @media only screen and (min-width: 800px) {\r\n      grid-template-columns: 17em 1fr;\r\n    }\r\n  }\r\n\r\n  @media only screen and (min-width: 600px) {\r\n    &--components &__body > * {\r\n      overflow-y: scroll;\r\n      height: calc( 100vh - var(--headerHeight) - 1px );\r\n    }\r\n  }\r\n\r\n  &__sidebar {\r\n    @include step(-2);\r\n    border-right: 1px solid color('petrol', 'step-3');\r\n    grid-row: -1;\r\n    scroll-behavior: none;\r\n  \r\n    @media only screen and (min-width: 600px) {\r\n      grid-row: auto;\r\n    }\r\n\r\n    @media only screen and (min-width: 800px) {\r\n      @include step(-1);\r\n    }\r\n\r\n    & > * {\r\n      @include padding('s-l', 's', 's-l', 's-l');\r\n    }\r\n\r\n    li {\r\n      position: relative;\r\n    }\r\n\r\n    li a {\r\n      color: color('utility-blue');\r\n\r\n      &:hover {\r\n        text-decoration: underline;\r\n        color: color('utility-blue');\r\n      }\r\n    }\r\n\r\n    li + li {\r\n      @include margin-top('xs');\r\n    }\r\n\r\n    ul ul {\r\n      @include padding('xs');\r\n      padding-bottom: 0;\r\n\r\n      li + li  {\r\n        @include margin-top('2xs');\r\n      }\r\n    }\r\n  }\r\n\r\n  &__skip-link {\r\n    @include padding('xs');\r\n    \r\n    @media only screen and (min-width: 600px) {\r\n      display: none;\r\n    }\r\n  }\r\n\r\n  &__logo {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    max-width: 15%;\r\n    min-width: 100px;\r\n\r\n    @media only screen and (min-width:650px) {\r\n      justify-content: flex-start;\r\n    }\r\n    \r\n    &-name {\r\n      @include padding-left('xs-s');\r\n      @include margin-left('xs-s');\r\n      border-left: 1px solid color('petrol', 'step-1');\r\n      white-space: nowrap;\r\n\r\n      span {\r\n        display: block;\r\n\r\n        &:nth-last-child(3),\r\n        &:nth-last-child(1) {\r\n          text-transform: uppercase;\r\n          @include step(-1);\r\n          letter-spacing: 0.08em;\r\n          color: color('petrol', 'step-2');\r\n        }\r\n\r\n        &:nth-last-child(2) {\r\n          color: color('white');\r\n          @include step(4);\r\n        }\r\n\r\n        &:nth-last-child(3) {\r\n          color: color('petrol', 'step-1');\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .has-js &__sidebar ul > li > ul {\r\n    display: none;\r\n  }\r\n\r\n  .has-js &__sidebar ul > .c-library-accordion-open > ul {\r\n    display: block;\r\n  }\r\n\r\n  .c-library-accordion-open > .c-library-accordion__toggle {\r\n    transform: rotate(180deg);\r\n  }\r\n\r\n  .c-library-accordion__toggle {\r\n    color: color('utility-blue');\r\n    line-height: 1;\r\n    font-size: 1rem;\r\n    position: absolute;\r\n    right: 0;\r\n    top: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 0.25rem;\r\n  }\r\n\r\n  &-menu-active  {\r\n    font-weight: weight('bold');\r\n    position: relative;\r\n\r\n    &::before {\r\n      content: '▸ ';\r\n      position: absolute;\r\n      left: -17px;\r\n      top: 0;\r\n    }\r\n  }\r\n\r\n  &-stretch {\r\n    display: flex;\r\n    flex-direction: column;\r\n    flex: 1;\r\n  }\r\n\r\n  &__main {\r\n    overflow-y: auto;\r\n\r\n    @media only screen and (min-width: 600px) {\r\n      overflow-y: scroll;\r\n    }\r\n  }\r\n\r\n  &__frame {\r\n    position: relative;\r\n    width: 100%;\r\n    \r\n    &-links {\r\n      position: absolute;\r\n      right: 0;\r\n      top: calc(-1 * (var(--space-m) + var(--space-s)));\r\n      z-index: 1;\r\n\r\n      a, button {\r\n        border-radius: 0 0 0.25em 0.25em;\r\n        @include step(-1);\r\n        padding: 0.25em 0.666em;\r\n        background: color('petrol', 'step-2');\r\n        color: color('grey', 'step-1');\r\n      }\r\n    }\r\n\r\n    &-background {\r\n      border-radius: 0 0 0 0.25em;\r\n      top: 0;\r\n    }\r\n\r\n    iframe {\r\n      height: 100%;\r\n      width: 100%;\r\n      left: 0;\r\n      top: 0;\r\n      transition: all .3s cubic-bezier(0.22, 0.61, 0.36, 1);\r\n\r\n      @media only screen and (min-width: 600px) {\r\n        position: absolute;\r\n      }\r\n    }\r\n  }\r\n\r\n  &-code {\r\n    font-family: 'Source Code Pro';\r\n  }\r\n\r\n  &-pre {\r\n    overflow-x: auto;\r\n    background: color('petrol', 'step-3');\r\n    @include padding('s');\r\n    font-family: 'Source Code Pro';\r\n    line-height: 1.4;\r\n\r\n    &--bordered {\r\n      border-bottom: 1px solid color('petrol', 'step-2');\r\n    }\r\n  }\r\n\r\n  &-version {\r\n    @include step(-1);\r\n    color: color('grey', 'step-1');\r\n  }\r\n\r\n  &-status {\r\n    @include step(-1);\r\n    padding: 0.25em 0.666em;\r\n    border-radius: 0.25em;\r\n    background: color('petrol', 'step-2');\r\n    color: color('grey', 'step-1');\r\n\r\n    &--ready {\r\n      background: color('green');\r\n      color: color('white');\r\n    }\r\n\r\n    &--in-production,\r\n    &--development,\r\n    &--placeholder {\r\n      background: color('utility-orange');\r\n      color: color('white');\r\n    }\r\n\r\n    &--deprecated {\r\n      background: color('red');\r\n      color: color('white');\r\n    }\r\n  }\r\n\r\n  &__swatch-grid {\r\n    display: grid;\r\n    gap: 0 1em;\r\n    grid-auto-rows: minmax(4em, auto);\r\n    margin-bottom: var(--space-m);\r\n    \r\n    @media only screen and (min-width: 680px) {\r\n      gap: 0;\r\n      grid-template-columns: repeat(5, auto);\r\n      grid-template-rows: 5em auto;\r\n    }\r\n  }\r\n  \r\n  &__swatch-grid--has-labels {\r\n    grid-auto-flow: row;\r\n    \r\n    @media only screen and (min-width: 40em) {\r\n      grid-template-columns: minmax(15%, 15em) auto;\r\n      grid-template-rows: auto;\r\n    }\r\n    \r\n    @media only screen and (min-width:1000px) {\r\n      grid-auto-flow: column;\r\n      grid-template-columns: repeat(5, 1fr);\r\n      grid-template-rows: 5em auto;\r\n    }\r\n  }\r\n  \r\n  &__swatches,\r\n  &__swatch-labels {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, 165px);\r\n  }\r\n  \r\n  &__swatch {\r\n    display: flex;\r\n    \r\n    & > * {\r\n      justify-content: center;\r\n      font-weight: weight('bold');\r\n      margin: auto;\r\n    }\r\n  }\r\n  \r\n  &__swatches {\r\n    & > * {\r\n      height: 0;\r\n      padding-bottom: 50%;\r\n      position: relative;\r\n      \r\n      & > * {\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        padding: 0.5rem;\r\n        font-weight: weight('bold');\r\n        text-align: center;\r\n        position: absolute;\r\n        height: 100%;\r\n        width: 100%;\r\n        left: 0;\r\n        top: 0;\r\n      }\r\n    }\r\n  }\r\n  \r\n  &__swatch-grid table {\r\n    @include step(-2);\r\n    \r\n    td,\r\n    th {\r\n      @include padding('2xs', 0, '2xs', '3xs');\r\n    }\r\n    th {\r\n      widtH: 3em;\r\n    }\r\n    td {\r\n      font-family: monospace;\r\n    }\r\n  }\r\n\r\n  &__image-row {\r\n    display: flex;\r\n    max-width: 100%;\r\n\r\n    img {\r\n      flex: 1 1 auto;\r\n      margin: 0 2% 0 0;\r\n      object-fit: contain;\r\n      width: 6%;\r\n\r\n      &:last-child {\r\n        margin-right: 0;\r\n      }\r\n    }\r\n  }\r\n\r\n  &__space {\r\n    display: block;\r\n\r\n    span {\r\n      background: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), rgba(206, 0, 88, 0.5);\r\n      height: 0;\r\n      padding-bottom: 100%;\r\n      position: relative;\r\n      display: block;\r\n    }\r\n\r\n    code {\r\n      position: absolute;\r\n      line-height: 1;\r\n      left: 100%;\r\n      top: 50%;\r\n      @include margin-left('s');\r\n      white-space: nowrap;\r\n      transform: translateY(-50%);\r\n    }\r\n  }\r\n\r\n  &-grid {\r\n    background: color('blue', 'step--1');\r\n    padding: 3rem 1rem;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    color: color('white');\r\n    @include step(-1);\r\n\r\n    &--alt {\r\n      background: color('petrol', 'step-1');\r\n      padding: 2rem 1rem;\r\n  \r\n      &:before {\r\n        content: '\\00a0';\r\n        display: block;\r\n      }\r\n    }\r\n\r\n    &--first {\r\n      background: color('petrol');\r\n      padding: 2rem 1rem;\r\n  \r\n      &:before {\r\n        content: 'First on mobile';\r\n      }\r\n    }\r\n  }\r\n\r\n  &-copy {\r\n    position: relative;\r\n\r\n    &__trigger {\r\n      position: absolute;\r\n      background: color('petrol', 'step-2');\r\n      bottom: 0;\r\n      right: 0;\r\n      font-weight: weight('bold');\r\n      @include step(-1);\r\n      @include padding('3xs', '2xs');\r\n      letter-spacing: ls('2%');\r\n      \r\n      &:hover {\r\n        color: color('red');\r\n      }\r\n    }\r\n  }\r\n\r\n  hr {\r\n    @extend .u-hr\r\n  }\r\n\r\n  &__typo {\r\n\r\n    &__sidebar {\r\n      width: grid-column(2);\r\n\r\n      span {\r\n        display: block;\r\n\r\n      }\r\n\r\n      .x2 {\r\n        margin-top: 4.25em;\r\n        border: 1px solid color(\"grey\");\r\n        border-width: 1px 0;\r\n        height: 2em;\r\n        line-height: 2em;\r\n      }\r\n    }\r\n\r\n    &__main {\r\n      width: grid-column(10);\r\n    }\r\n  }\r\n\r\n  &__semi {\r\n    font-weight: 600;\r\n  }\r\n\r\n  &__photo-grid {\r\n    display: grid;\r\n    gap: 2px;\r\n    grid-template-columns: 1fr;\r\n    @include margin-top(xl);\r\n\r\n    @media only screen and (min-width: 880px) {\r\n      grid-auto-flow: dense;\r\n      grid-auto-rows: auto;\r\n\r\n      img {\r\n        height: 100%;\r\n        width: 100%;\r\n        object-fit: cover;\r\n      }\r\n\r\n      div {\r\n        grid-column: 1/3;\r\n        grid-row: 1/2;\r\n        display: flex;\r\n\r\n        h2 {\r\n          margin: auto var(--space-s);\r\n        }\r\n      }\r\n\r\n      &.grid-1 {\r\n        grid-template-columns: 40% 20% 40%;\r\n        grid-template-rows: var(--space-2xl) 400px 400px;\r\n\r\n        img {  \r\n          &:nth-child(2) {\r\n            grid-row: 2/3;\r\n            grid-column: 1/3;\r\n          }\r\n  \r\n          &:nth-child(3) {\r\n            grid-column: 3/4;\r\n            grid-row: 1/3;\r\n          }\r\n  \r\n          &:nth-child(5) {\r\n            grid-column: 2/4;\r\n          }\r\n        }\r\n      }\r\n\r\n      &.grid-2 {\r\n        grid-template-columns: 50% 50%;\r\n        grid-template-rows: var(--space-2xl) 300px 300px;\r\n\r\n        div {\r\n          grid-column: 1/2;\r\n        }\r\n\r\n        img {\r\n          &:nth-child(2) {\r\n            grid-row: 2/4;\r\n          }\r\n          &:nth-child(3) {\r\n            grid-row: 1/3;\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n  }\r\n\r\n  &__illustration-grid {\r\n      display:grid;\r\n      grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));\r\n      gap:var(--gutter);\r\n      \r\n      & :nth-child(odd):nth-last-child(3) {\r\n          grid-column: 1/-1;\r\n      }\r\n  }\r\n\r\n  .c-alert ul li {\r\n    list-style: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"20\" viewBox=\"0 0 10 20\"><circle cx=\"5\" cy=\"14\" r=\"3.5\" fill=\"%2313AA13\" fill-rule=\"evenodd\"/></svg>') outside;    \r\n    margin-left: 1em;\r\n    padding-left: 0.5rem;\r\n\r\n    h3,\r\n    h4 {\r\n      line-height: lh('prose');\r\n      font-size: 1em;\r\n      color: color('green');\r\n    }\r\n  }\r\n}\r\n\r\n// Header responsive styles\r\n@media only screen and (max-width: 1050px) {\r\n  .c-library__logo-name span:nth-last-child(3),\r\n  .c-library__logo-name span:nth-last-child(1) {\r\n    @include step(-2);\r\n  }\r\n\r\n  .c-library__logo-name span:nth-last-child(2) {\r\n    @include step(1);\r\n  }\r\n\r\n  .c-library__header nav li:last-child {\r\n    display: none;\r\n  }\r\n}\r\n\r\n@media only screen and (min-width: 650px) and (max-width: 700px),\r\n            screen and (max-width: 450px) {\r\n  .c-library__header nav .u-row {\r\n    @include space('gap', '2xs');\r\n    @include step(-2);\r\n  }\r\n}\r\n\r\n.c-library__header {\r\n  @media only screen and (max-width: 650px) {\r\n    nav a {\r\n      @include padding('2xs',0);\r\n      display: block;\r\n    }\r\n\r\n    .c-library-page-active:after {\r\n      @include space('bottom','3xs');\r\n    }\r\n  }\r\n}","// Breakout\r\n// Force an element to fill 100% of the window width, ignoring its container\r\n\r\n@mixin breakout($pad: 0) {\r\n    left: 50%;\r\n    left: calc( 50% + var(--scrollbarWidth)/2.0001 );\r\n    position: relative;\r\n    transform: translateX(-50vw);\r\n    width: 100vw;\r\n    width: calc( 100vw - var(--scrollbarWidth) );\r\n    padding-left: safe-space($pad);\r\n    padding-right: safe-space($pad);\r\n}\r\n\r\n.u-breakout {\r\n    @include breakout\r\n}","// Cutoff corner effect\r\n\r\n$g : var(--gutter);\r\n$og : calc(100% - var(--gutter));\r\n\r\n@mixin cutoff($corner:\"bottom-right\") {\r\n    @if $corner == \"top-left\" {\r\n        clip-path: polygon( \r\n            $g 0,\r\n            100% 0,\r\n            100% 100%,\r\n            0 100%,\r\n            0 $g \r\n        );\r\n    } @else if $corner == \"top-right\" {\r\n        clip-path: polygon( \r\n            0 0,\r\n            $og 0,\r\n            100% $g,\r\n            100% 100%,\r\n            0 100% \r\n        );\r\n    } @else if $corner == \"bottom-left\" {\r\n        clip-path: polygon( \r\n            0 0,\r\n            100% 0,\r\n            100% 100%,\r\n            $g 100%,\r\n            0 $og \r\n        );\r\n    } @else {\r\n        clip-path: polygon( \r\n            0 0,\r\n            100% 0,\r\n            100% $og,\r\n            $og 100%,\r\n            0 100% \r\n        );\r\n    }\r\n}\r\n\r\n.u-cutoff {\r\n    @include cutoff\r\n}\r\n\r\n.u-cutoff--top-right {\r\n    @include cutoff(\"top-right\")\r\n}\r\n\r\n.u-cutoff--top-left {\r\n    @include cutoff(\"top-left\")\r\n}\r\n\r\n.u-cutoff--bottom-left {\r\n    @include cutoff(\"bottom-left\")\r\n}","$weights: (\r\n  base: 400,\r\n  semi: 600,\r\n  bold: 700\r\n);\r\n\r\n$line-heights: (\r\n  base: 1.2,\r\n  prose: 1.6,\r\n);\r\n\r\n$letter-spacings: (\r\n  '4%': 0.04em,\r\n  '2%': 0.02em,\r\n  base: -0.01em,\r\n  '-2%': -0.02em,\r\n  '-3%': -0.03em\r\n);\r\n\r\n$font-stack: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;\r\n\r\n/* @link https://utopia.fyi/generator-mk-ii?c=320,16,1.2,1332,18,1.2,10,2, */\r\n$steps: (\r\n  -2: (\r\n    min: 12.64,\r\n    max: 12.50,\r\n    ls: base\r\n  ),\r\n\r\n  -1: (\r\n    min: 14.22,\r\n    max: 15.00,\r\n    ls: base\r\n  ),\r\n\r\n  0: (\r\n    min: 16.00,\r\n    max: 18.00,\r\n    ls: base\r\n  ),\r\n\r\n  1: (\r\n    min: 18.00,\r\n    max: 21.60,\r\n    ls: '-2%'\r\n  ),\r\n\r\n  2: (\r\n    min: 20.25,\r\n    max: 25.92,\r\n    ls: '-2%'\r\n  ),\r\n\r\n  3: (\r\n    min: 22.78,\r\n    max: 31.10,\r\n    ls: '-2%'\r\n  ),\r\n\r\n  4: (\r\n    min: 25.63,\r\n    max: 37.32,\r\n    ls: '-3%'\r\n  ),\r\n\r\n  5: (\r\n    min: 28.83,\r\n    max: 44.79,\r\n    ls: '-3%'\r\n  ),\r\n\r\n  6: (\r\n    min: 32.44,\r\n    max: 53.75,\r\n    ls: '-3%'\r\n  ),\r\n\r\n  7: (\r\n    min: 36.49,\r\n    max: 64.50,\r\n    ls: '-3%'\r\n  ),\r\n\r\n  8: (\r\n    min: 41.05,\r\n    max: 77.40,\r\n    ls: '-3%'\r\n  ),\r\n\r\n  9: (\r\n    min: 46.18,\r\n    max: 92.88,\r\n    ls: '-3%'\r\n  ),\r\n\r\n  10: (\r\n    min: 51.96,\r\n    max: 111.45,\r\n    ls: '-3%'\r\n  )\r\n);\r\n\r\n$f-min-width: 320;\r\n$f-max-width: 1332;\r\n\r\n:root {\r\n  --fluid-min-width: #{$f-min-width};\r\n  --fluid-max-width: #{$f-max-width};\r\n\r\n  --fluid-screen: 100vw;\r\n  --fluid-bp: calc(\r\n    (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) /\r\n      (var(--fluid-max-width) - var(--fluid-min-width))\r\n  );\r\n}\r\n\r\n@media screen and (min-width: #{$f-max-width * 1px}) {\r\n  :root {\r\n    --fluid-screen: calc(var(--fluid-max-width) * 1px);\r\n  }\r\n}\r\n\r\n:root {\r\n  @each $name, $step in $steps {\r\n    --f-#{$name}-min: #{map-get($step, min)};\r\n    --f-#{$name}-max: #{map-get($step, max)};\r\n    --step-#{$name}: calc(\r\n      ((var(--f-#{$name}-min) / 16) * 1rem) + (var(--f-#{$name}-max) - var(--f-#{$name}-min)) *\r\n        var(--fluid-bp)\r\n    );\r\n  }\r\n}\r\n\r\n@font-face {\r\n  font-family: 'Inter';\r\n  font-style:  normal;\r\n  font-weight: 400;\r\n  font-display: swap;\r\n  src: url(\"../fonts/Inter-Regular.woff2\") format(\"woff2\"),\r\n       url(\"../fonts/Inter-Regular.woff\") format(\"woff\");\r\n}\r\n\r\n@font-face {\r\n  font-family: 'Inter';\r\n  font-style:  normal;\r\n  font-weight: 600;\r\n  font-display: swap;\r\n  src: url('../fonts/Inter-SemiBold.woff2') format(\"woff2\"),\r\n       url('../fonts/Inter-SemiBold.woff') format(\"woff\");\r\n}\r\n\r\n@font-face {\r\n  font-family: 'Inter';\r\n  font-style:  normal;\r\n  font-weight: 700;\r\n  font-display: swap;\r\n  src: url('../fonts/Inter-Bold.woff2') format(\"woff2\"),\r\n       url('../fonts/Inter-Bold.woff') format(\"woff\");\r\n}","@use 'sass:math';\r\n\r\n$wrapper: 78.75rem;\r\n\r\n$space-base: 18;\r\n$spaces: (\r\n  \"3xs\": 0.25,\r\n  \"2xs\": 0.5,\r\n  \"xs\": 0.75,\r\n  \"s\": 1,\r\n  \"m\": 1.5,\r\n  \"l\": 2,\r\n  \"xl\": 3,\r\n  \"2xl\": 4,\r\n  \"3xl\": 6,\r\n  \"4xl\": 8,\r\n);\r\n\r\n:root {\r\n  --max-screen: #{ math.div($f-max-width, 16) };\r\n  --fc-screen: 100vw;\r\n  --fc-bp: calc((var(--fc-screen) - 20em) / (var(--max-screen) - 20));\r\n\r\n  --fc-base: #{$space-base};\r\n\r\n  @each $space, $_ in $spaces {\r\n    --fc-#{$space}: #{space-size($space)};\r\n    --space-#{$space}: calc(var(--fc-#{$space}) / 16 * 1rem);\r\n  }\r\n\r\n  $min: \"\";\r\n  @each $max, $_ in $spaces {\r\n    @if ($min) {\r\n      @include space-between($min, $max);\r\n    }\r\n    $min: $max;\r\n  }\r\n\r\n  @include space-between(s, l);\r\n  @include space-between(s, m);\r\n  @include space-between(xs, l);\r\n  @include space-between(m, xl);\r\n  @include space-between(l, 2xl);\r\n  @include space-between(s, xl);\r\n  @include space-between(l, 3xl);\r\n  @include space-between(xl, 3xl);\r\n  @include space-between(l, 4xl);\r\n  @include space-between(3xs, m);\r\n\r\n  --gutter: var(--space-s-l);\r\n}\r\n\r\n@media screen and (min-width: 75em) {\r\n  :root {\r\n    --fc-screen: calc(var(--max-screen) * 1rem);\r\n  }\r\n}\r\n","@import './breakout.scss';\r\n@import './cutoff.scss';\r\n\r\n@function color($palette, $tone: 'step-0') {\r\n  @return map-get(map-get($colours, $palette), $tone);\r\n}\r\n\r\n@function lh($size: 'base') {\r\n  @return map-get($line-heights, $size);\r\n}\r\n\r\n@function ls($size: 'base') {\r\n  @return map-get($letter-spacings, $size);\r\n}\r\n\r\n@function weight($size: 'base') {\r\n  @return map-get($weights, $size);\r\n}\r\n\r\n@mixin step($step: 0) {\r\n  letter-spacing: ls(map-get(map-get($steps, $step), ls));\r\n  font-size: 1px * map-get(map-get($steps, $step), max);\r\n  font-size: var(--step-#{$step});\r\n}\r\n\r\n@mixin flow($size) {\r\n  & > * + * {\r\n    @include margin-top($size);\r\n  }\r\n}\r\n\r\n@function space-size($key: s) {\r\n  @return $space-base * map-get($spaces, $key);\r\n}\r\n\r\n@function space-unit($key: s) {\r\n  @return space-size($key) * 1px;\r\n}\r\n\r\n@mixin space-between($min, $max) {\r\n  --space-#{$min}-#{$max}: calc(\r\n    ((var(--fc-#{$min}) / 16) * 1rem) + (var(--fc-#{$max}) - var(--fc-#{$min})) *\r\n      var(--fluid-bp)\r\n  );\r\n}\r\n\r\n@function safe-space($value, $safe: false) {\r\n  @if (type-of($value) == number) {\r\n    @return $value;\r\n  } @else if (type-of($value) == null) {\r\n    @return 0;\r\n  } @else if (type-of($value) == string) {\r\n    $split: get-min-max($value);\r\n    $min: nth($split, 1);\r\n\r\n    @if ($value == 'gutter') {\r\n      @if ($safe) {\r\n        @return space-unit(s);\r\n      } @else {\r\n        @return var(--gutter);        \r\n      }\r\n    }\r\n\r\n    @if ($value == 'auto') {\r\n      @return auto;\r\n    }\r\n    \r\n    @if ($safe) {\r\n      @return space-unit($min);\r\n    } @else {\r\n      @return var(--space-#{$value});      \r\n    }\r\n  }\r\n}\r\n\r\n@mixin padding($arg1: '', $arg2: '', $arg3: '', $arg4: '') { @include space('padding', $arg1, $arg2, $arg3, $arg4); }\r\n@mixin padding-top($arg1: '') { @include space('padding-top', $arg1); }\r\n@mixin padding-right($arg1: '') { @include space('padding-right', $arg1); }\r\n@mixin padding-bottom($arg1: '') { @include space('padding-bottom', $arg1); }\r\n@mixin padding-left($arg1: '') { @include space('padding-left', $arg1); }\r\n@mixin margin($arg1: '', $arg2: '', $arg3: '', $arg4: '') { @include space('margin', $arg1, $arg2, $arg3, $arg4); }\r\n@mixin margin-top($arg1: '') { @include space('margin-top', $arg1); }\r\n@mixin margin-right($arg1: '') { @include space('margin-right', $arg1); }\r\n@mixin margin-bottom($arg1: '') { @include space('margin-bottom', $arg1); }\r\n@mixin margin-left($arg1: '') { @include space('margin-left', $arg1); }\r\n@mixin grid-gap($arg1: '', $arg2: '') { @include space('grid-gap', $arg1, $arg2); }\r\n@mixin gap($arg1: '', $arg2: '') { @include space('gap', $arg1, $arg2); }\r\n@mixin top($arg1: '') { @include space('top', $arg1); }\r\n\r\n@mixin space($property, $arg1: '', $arg2: '', $arg3: '', $arg4: '') {\r\n  @if ($arg4 != '') {\r\n    #{$property}: safe-space($arg1, true) safe-space($arg2, true) safe-space($arg3, true) safe-space($arg4, true);\r\n    #{$property}: safe-space($arg1) safe-space($arg2) safe-space($arg3) safe-space($arg4);\r\n  } @else if ($arg3 != '') {\r\n    #{$property}: safe-space($arg1, true) safe-space($arg2, true) safe-space($arg3, true);\r\n    #{$property}: safe-space($arg1) safe-space($arg2) safe-space($arg3);\r\n  } @else if ($arg2 != '') {\r\n    #{$property}: safe-space($arg1, true) safe-space($arg2, true);\r\n    #{$property}: safe-space($arg1) safe-space($arg2);\r\n  } @else if ($arg1 != '') {\r\n    #{$property}: safe-space($arg1, true);\r\n    #{$property}: safe-space($arg1);\r\n  }\r\n}\r\n\r\n@function get-min-max($value) {\r\n  $split: str-split($value, '-');\r\n  $min: nth($split, 1);\r\n\r\n  @if (length($split) == 1) {\r\n    @return ($min, null);\r\n  } @else {\r\n    @return ($min, nth($split, 2))\r\n  }\r\n}\r\n\r\n@function str-split($string, $separator) {\r\n  // empty array/list\r\n  $split-arr: ();\r\n  // first index of separator in string\r\n  $index : str-index($string, $separator);\r\n  // loop through string\r\n  @while $index != null {\r\n      // get the substring from the first character to the separator\r\n      $item: str-slice($string, 1, $index - 1);\r\n      // push item to array\r\n      $split-arr: append($split-arr, $item);\r\n      // remove item and separator from string\r\n      $string: str-slice($string, $index + 1);\r\n      // find new index of separator\r\n      $index : str-index($string, $separator);\r\n  }\r\n  // add the remaining string to list (the last item)\r\n  $split-arr: append($split-arr, $string);\r\n\r\n  @return $split-arr;\r\n}\r\n\r\n@mixin hyphenated {\r\n  @media only screen and (max-width: 28rem) {\r\n    word-break: break-word;\r\n    -webkit-hyphens: auto;\r\n    -ms-hyphens: auto;\r\n    hyphens: auto;\r\n  }\r\n\r\n  @media only screen and (max-width: 70rem) {\r\n    [lang='de-DE'] & {\r\n      word-break: break-word;\r\n      -webkit-hyphens: auto;\r\n      -ms-hyphens: auto;\r\n      hyphens: auto;\r\n    }\r\n  }\r\n}","\r\n*,\r\n*:before,\r\n*:after {\r\n  box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: flex-start;\r\n  align-items: stretch;\r\n  min-height: 100vh;\r\n  margin: 0;\r\n}\r\n\r\nhtml {\r\n  scroll-behavior: smooth;\r\n}\r\n\r\nblockquote,\r\npre,\r\nol,\r\nul,\r\nfigure {\r\n  padding: 0;\r\n  margin: 0;\r\n}\r\n\r\nimg {\r\n  max-width: 100%;\r\n  display: block;\r\n  height: auto;\r\n  border: none;\r\n}\r\n\r\narticle,\r\naside,\r\nfigure,\r\nfooter,\r\nheader,\r\naside,\r\nmain,\r\nnav {\r\n  display: block;\r\n}\r\n\r\niframe {\r\n  border: none;\r\n}\r\n\r\n// Typography\r\n\r\n@mixin mp-reset-base {\r\n  font: weight() #{1.125rem}/lh() $font-stack;\r\n  @include step();\r\n  color: color('grey');\r\n}\r\n\r\nbody {\r\n  @include mp-reset-base();\r\n}\r\n\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np,\r\nul,\r\nol,\r\ndl {\r\n  margin: 0\r\n}\r\n\r\nul, ol, p {\r\n  line-height: lh();\r\n}\r\n\r\na {\r\n  text-decoration: none;\r\n}\r\n\r\na,\r\na:hover {\r\n  cursor: pointer;\r\n  color: inherit;\r\n}\r\n\r\n// Lists\r\n\r\n.mp ol,\r\n.mp ul {\r\n  list-style: none;\r\n}\r\n\r\n// Font styles\r\n\r\ncite,\r\naddress {\r\n  font-style: normal;\r\n}\r\n\r\n// Form\r\n\r\n[type=\"submit\"],\r\n[type=\"button\"],\r\nbutton {\r\n  border-radius: 0;\r\n  background: transparent;\r\n  box-shadow: none;\r\n  appearance: none;\r\n  padding: 0;\r\n  cursor: pointer;\r\n  border: none;\r\n  color: inherit;\r\n  font: inherit;\r\n}\r\n\r\n[disabled],\r\n.mp.c-button[disabled] {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n}\r\n\r\nlabel {\r\n  cursor: pointer;\r\n}\r\n\r\nfieldset {\r\n  border: 0;\r\n  padding: 0.01em 0 0 0;\r\n}\r\n\r\n// Animation\r\n\r\n@media (prefers-reduced-motion:reduce) {\r\n  * {\r\n    -webkit-animation: none!important;\r\n    animation: none!important;\r\n    transition: none!important;\r\n    scroll-behavior: auto!important;\r\n  }\r\n}\r\n","code[class*=\"language-\"],\r\npre[class*=\"language-\"] {\r\n\ttext-align: left;\r\n\twhite-space: pre;\r\n\tword-spacing: normal;\r\n\tword-break: normal;\r\n\tword-wrap: normal;\r\n  color: color('petrol', 'step-1');\r\n  background: color('petrol', 'step-3');\r\n  font-family: 'Source Code Pro', monospace;\r\n\tfont-size: 1rem;\r\n\tline-height: 1.5em;\r\n\r\n\t-moz-tab-size: 4;\r\n\t-o-tab-size: 4;\r\n\ttab-size: 4;\r\n\r\n\t-webkit-hyphens: none;\r\n\t-moz-hyphens: none;\r\n\t-ms-hyphens: none;\r\n\thyphens: none;\r\n}\r\n\r\ncode[class*=\"language-\"]::-moz-selection,\r\npre[class*=\"language-\"]::-moz-selection,\r\ncode[class*=\"language-\"] ::-moz-selection,\r\npre[class*=\"language-\"] ::-moz-selection {\r\n\tbackground: #cceae7;\r\n\tcolor: #263238;\r\n}\r\n\r\ncode[class*=\"language-\"]::selection,\r\npre[class*=\"language-\"]::selection,\r\ncode[class*=\"language-\"] ::selection,\r\npre[class*=\"language-\"] ::selection {\r\n\tbackground: #cceae7;\r\n\tcolor: #263238;\r\n}\r\n\r\n:not(pre) > code[class*=\"language-\"] {\r\n\twhite-space: normal;\r\n\tborder-radius: 0.2em;\r\n\tpadding: 0.1em;\r\n}\r\n\r\npre[class*=\"language-\"] {\r\n\toverflow: auto;\r\n  position: relative;\r\n  @include padding('s');\r\n}\r\n\r\n.language-css > code,\r\n.language-sass > code,\r\n.language-scss > code {\r\n\tcolor: color('utility-orange');\r\n}\r\n\r\n[class*=\"language-\"] .namespace {\r\n\topacity: 0.7;\r\n}\r\n\r\n.token.atrule {\r\n\tcolor: color('petrol', 'step-1');\r\n}\r\n\r\n.token.attr-name {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.attr-value {\r\n\tcolor: color('green');\r\n}\r\n\r\n.token.attribute {\r\n\tcolor: color('green');\r\n}\r\n\r\n.token.boolean {\r\n\tcolor: color('red');\r\n}\r\n\r\n.token.builtin {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.cdata {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.char {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.class {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.class-name {\r\n\tcolor: #6182b8;\r\n}\r\n\r\n.token.comment {\r\n\tcolor: #aabfc9;\r\n}\r\n\r\n.token.constant {\r\n\tcolor: color('petrol', 'step-1');\r\n}\r\n\r\n.token.deleted {\r\n\tcolor: color('red');\r\n}\r\n\r\n.token.doctype {\r\n\tcolor: #aabfc9;\r\n}\r\n\r\n.token.entity {\r\n\tcolor: color('red');\r\n}\r\n\r\n.token.function {\r\n\tcolor: color('petrol', 'step-1');\r\n}\r\n\r\n.token.hexcode {\r\n\tcolor: color('utility-orange');\r\n}\r\n\r\n.token.id {\r\n\tcolor: color('petrol', 'step-1');\r\n\tfont-weight: bold;\r\n}\r\n\r\n.token.important {\r\n\tcolor: color('petrol', 'step-1');\r\n\tfont-weight: bold;\r\n}\r\n\r\n.token.inserted {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.keyword {\r\n\tcolor: color('petrol', 'step-1');\r\n}\r\n\r\n.token.number {\r\n\tcolor: color('utility-orange');\r\n}\r\n\r\n.token.operator {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.prolog {\r\n\tcolor: #aabfc9;\r\n}\r\n\r\n.token.property {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.pseudo-class {\r\n\tcolor: color('green');\r\n}\r\n\r\n.token.pseudo-element {\r\n\tcolor: color('green');\r\n}\r\n\r\n.token.punctuation {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.regex {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.selector {\r\n\tcolor: color('red');\r\n}\r\n\r\n.token.string {\r\n\tcolor: color('green');\r\n}\r\n\r\n.token.symbol {\r\n\tcolor: color('petrol', 'step-1');\r\n}\r\n\r\n.token.tag {\r\n\tcolor: color('petrol');\r\n}\r\n\r\n.token.unit {\r\n\tcolor: color('utility-orange');\r\n}\r\n\r\n.token.url {\r\n\tcolor: color('red');\r\n}\r\n\r\n.token.variable {\r\n\tcolor: color('red');\r\n}\r\n\r\n",".u-hr {\r\n  margin: 0;\r\n  border: none;\r\n  @include padding-bottom('m-xl');\r\n  @include margin-bottom('m-xl');\r\n  border-bottom: 1px solid color('petrol', 'step-2');\r\n}\r\n\r\n.u-border-top {\r\n  border-top: 1px solid color('petrol', 'step-2');\r\n}\r\n\r\n.u-border-bottom {\r\n  border-bottom: 1px solid color('petrol', 'step-2');\r\n}\r\n\r\n.u-border {\r\n  border: 1px solid color('petrol', 'step-2');\r\n}\r\n\r\n.o-prose hr {\r\n  @extend .u-hr\r\n}","@use 'sass:math';\r\n\r\n// Layout\r\n$grid-width: 1260;\r\n$grid-columns: 12;\r\n$grid-column-width: 72;\r\n$grid-gutter-width: 36;\r\n\r\n@function grid-gutter() {\r\n  @return math.div($grid-gutter-width, $grid-width) * 100%;\r\n}\r\n\r\n@function grid-column($count) {\r\n  @return math.div(\r\n    (\r\n      ($count * $grid-column-width) + (($count - 1) * $grid-gutter-width)\r\n    ), $grid-width\r\n  ) * 100%;\r\n}\r\n\r\n@function grid-column-px($count) {\r\n  @return (($count * $grid-column-width) + (($count - 1) * $grid-gutter-width)) * 1px;\r\n}\r\n\r\n@mixin o-grid($columns) {\r\n  $width: math.div(100%, $columns);\r\n  \r\n  & > * {\r\n    width: calc(($width - (($columns - 1) * #{space-unit()} / $columns)) - 0.1px);\r\n    width: calc(($width - (($columns - 1) * var(--gutter) / $columns)) - 0.1px);\r\n    \r\n    & + * {\r\n      @include margin-left(\"gutter\");\r\n    }\r\n\r\n    &:nth-child(#{$columns}n + 1) {\r\n      margin-left: 0;\r\n    }\r\n  }\r\n}\r\n\r\n.o-grid {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  justify-content: stretch;\r\n  margin-bottom: calc(-1 * #{space-unit()});\r\n  margin-bottom: calc(-1 * var(--gutter));\r\n  width: 100%;\r\n\r\n  &--float:after {\r\n    content: \" \";\r\n    display: table;\r\n    clear: both;\r\n  }\r\n\r\n  &--between {\r\n    justify-content: space-between;\r\n  }\r\n\r\n  &--no-height-match {\r\n    align-items: start;\r\n  }\r\n\r\n  & > * {\r\n    width: 100%;\r\n    @include margin-bottom(\"gutter\");\r\n  }\r\n\r\n  &--of-two {\r\n    @media (min-width: 40em) {\r\n      @include o-grid(2)\r\n    }\r\n  }\r\n\r\n  &--of-two-late {\r\n    @media (min-width: 55em) {\r\n      @include o-grid(2)\r\n    }\r\n  }\r\n\r\n  &--of-two-early {\r\n    @media (min-width: 22.4em) {\r\n      @include o-grid(2)\r\n    }\r\n  }\r\n\r\n  &--of-three {\r\n    @media (min-width: 38em) and (max-width: 54.9375em) { // 608 - 1087\r\n      @include o-grid(2)\r\n    }\r\n\r\n    @media (min-width: 55em) {\r\n      @include o-grid(3)\r\n    }\r\n  }\r\n\r\n  &--of-three-late {\r\n    @media (min-width: 38em) and (max-width: 67.9375em) {\r\n      @include o-grid(2)\r\n    }\r\n\r\n    @media (min-width: 68em) {\r\n      @include o-grid(3)\r\n    }\r\n  }\r\n\r\n  &--of-three-early {\r\n    @media (min-width: 22.4em) and (max-width: 54.9375em) {\r\n      @include o-grid(2)\r\n    }\r\n\r\n    @media (min-width: 55em) {\r\n      @include o-grid(3)\r\n    }\r\n  }\r\n\r\n  &--of-four {\r\n    @media (min-width: 38em) and (max-width: 59.9375em) {\r\n      @include o-grid(2)\r\n    }\r\n\r\n    @media (min-width: 60em) {\r\n      @include o-grid(4)\r\n    }\r\n  }\r\n\r\n  &--of-four-early {\r\n    @media (min-width: 22.4em) and (max-width: 59.9375em) {\r\n      @include o-grid(2)\r\n    }\r\n\r\n    @media (min-width: 60em) {\r\n      @include o-grid(4)\r\n    }\r\n  }\r\n\r\n  &--swipeable {\r\n    @media (max-width: 54.9375em) {\r\n      @include breakout('gutter');\r\n      flex-wrap: nowrap;\r\n      overflow-x: scroll;\r\n      scroll-snap-type: x mandatory;\r\n      scroll-padding: var(--gutter);\r\n      -webkit-overflow-scrolling: touch;\r\n\r\n      & > * {\r\n        flex: 0 0 auto;\r\n        max-width: 23em;\r\n        width: calc(85vw - var(--gutter)*2.333); // !important\r\n        scroll-snap-align: start;\r\n        scroll-snap-stop: always;\r\n      }\r\n\r\n      & > * + * {\r\n        margin-left: var(--gutter) !important;\r\n      }\r\n    }\r\n  }\r\n\r\n  @media (min-width: 55em) {\r\n    &--4\\/7 > :nth-child(2n + 2),\r\n    &--4\\/7-switch > :nth-child(2n + 2) {\r\n      width: grid-column(7)\r\n    }\r\n\r\n    &--9\\/3 > :nth-child(2n + 1),\r\n    &--8\\/3 > :nth-child(2n + 1),\r\n    &--8\\/4 > :nth-child(2n + 1),\r\n    &--3\\/9 > :nth-child(2n + 2),\r\n    &--3\\/8 > :nth-child(2n + 2),\r\n    &--4\\/8 > :nth-child(2n + 2),\r\n    &--9\\/3-switch > :nth-child(2n + 2),\r\n    &--8\\/3-switch > :nth-child(2n + 2),\r\n    &--8\\/4-switch > :nth-child(2n + 2),\r\n    &--3\\/9-switch > :nth-child(2n + 1),\r\n    &--3\\/8-switch > :nth-child(2n + 1),\r\n    &--4\\/8-switch > :nth-child(2n + 1) {\r\n      width: grid-column(8);\r\n    }\r\n\r\n    &--9\\/3 > :nth-child(2n + 2),\r\n    &--8\\/3 > :nth-child(2n + 2),\r\n    &--8\\/4 > :nth-child(2n + 2),\r\n    &--3\\/9 > :nth-child(2n + 1),\r\n    &--3\\/8 > :nth-child(2n + 1),\r\n    &--4\\/8 > :nth-child(2n + 1),\r\n    &--4\\/7 > :nth-child(2n + 1),\r\n    &--9\\/3-switch > :nth-child(2n + 1),\r\n    &--8\\/3-switch > :nth-child(2n + 1),\r\n    &--8\\/4-switch > :nth-child(2n + 1),\r\n    &--3\\/9-switch > :nth-child(2n + 2),\r\n    &--3\\/8-switch > :nth-child(2n + 2),\r\n    &--4\\/8-switch > :nth-child(2n + 2),\r\n    &--4\\/7-switch > :nth-child(2n + 1) {\r\n      width: grid-column(4);\r\n    }\r\n\r\n    &--3\\/9 > :nth-child(2n + 2),\r\n    &--3\\/8 > :nth-child(2n + 2),\r\n    &--4\\/8 > :nth-child(2n + 2),\r\n    &--9\\/3 > :nth-child(2n + 2),\r\n    &--8\\/3 > :nth-child(2n + 2),\r\n    &--8\\/4 > :nth-child(2n + 2),\r\n    &--9\\/3-switch > :nth-child(2n + 1),\r\n    &--8\\/3-switch > :nth-child(2n + 1),\r\n    &--8\\/4-switch > :nth-child(2n + 1),\r\n    &--3\\/9-switch > :nth-child(2n + 1),\r\n    &--3\\/8-switch > :nth-child(2n + 1),\r\n    &--4\\/8-switch > :nth-child(2n + 1) {\r\n      margin-left: grid-gutter();\r\n      margin-right: 0;\r\n    }\r\n\r\n    &--8\\/3 > :nth-child(2n + 1),\r\n    &--3\\/8 > :nth-child(2n + 2),\r\n    &--8\\/3-switch > :nth-child(2n + 2),\r\n    &--3\\/8-switch > :nth-child(2n + 1) {\r\n      max-width: grid-column-px(8);\r\n    }\r\n\r\n    &[class*=\"switch\"] > :nth-child(2n + 1) {\r\n      order: 1;\r\n    }\r\n\r\n    &--layout {\r\n      margin-bottom: 0;\r\n\r\n      & > :nth-last-child(1),\r\n      & > :nth-last-child(2) {\r\n        margin-bottom: 0;\r\n      }\r\n    }\r\n\r\n    &--push {\r\n      justify-content: space-between;\r\n    }\r\n\r\n    &--pull {\r\n      justify-content: flex-start;\r\n    }\r\n\r\n    &--float {\r\n      display: block;\r\n    }\r\n\r\n    &--float:not([class*=\"switch\"]) > :nth-child(2n + 1),\r\n    &--float[class*=\"switch\"] > :nth-child(2n + 2) {\r\n      float: left;\r\n    }\r\n\r\n    &--float:not([class*=\"switch\"]) > :nth-child(2n + 2),\r\n    &--float[class*=\"switch\"] > :nth-child(2n + 1) {\r\n      float: right;\r\n    }\r\n  }\r\n\r\n  @media (min-width: 70em) {\r\n    &--9\\/3 > :nth-child(2n + 1),\r\n    &--8\\/3 > :nth-child(2n + 1),\r\n    &--3\\/9 > :nth-child(2n + 2),\r\n    &--3\\/8 > :nth-child(2n + 2),\r\n    &--9\\/3-switch > :nth-child(2n + 2),\r\n    &--8\\/3-switch > :nth-child(2n + 2),\r\n    &--3\\/9-switch > :nth-child(2n + 1),\r\n    &--3\\/8-switch > :nth-child(2n + 1) {\r\n      width: grid-column(9);\r\n    }\r\n\r\n    &--9\\/3 > :nth-child(2n + 2),\r\n    &--8\\/3 > :nth-child(2n + 2),\r\n    &--3\\/9 > :nth-child(2n + 1),\r\n    &--3\\/8 > :nth-child(2n + 1),\r\n    &--9\\/3-switch > :nth-child(2n + 1),\r\n    &--8\\/3-switch > :nth-child(2n + 1),\r\n    &--3\\/9-switch > :nth-child(2n + 2),\r\n    &--3\\/8-switch > :nth-child(2n + 2) {\r\n      width: grid-column(3);\r\n    }\r\n  }\r\n}\r\n"],"names":[],"version":3,"file":"library.css.map"}