.dark-mode-toggle-module-scss-module__FCEBCW__button{--border-color:var(--color-neutral-600);--border-color-hover:var(--color-neutral-300);--color:var(--color-white);--color-hover:var(--color-white)}.light-mode .dark-mode-toggle-module-scss-module__FCEBCW__button{--border-color:var(--color-neutral-500);--border-color-hover:var(--color-black);--color:var(--color-neutral-700);--color-hover:var(--color-black)}.dark-mode-toggle-module-scss-module__FCEBCW__button{all:unset;height:var(--space-20);width:var(--space-20);border:2px solid var(--border-color);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;transition:border-color .2s ease-in-out;display:flex}.dark-mode-toggle-module-scss-module__FCEBCW__button svg{height:var(--space-12);width:var(--space-12);color:var(--color);transition:fill .2s ease-in-out}.dark-mode-toggle-module-scss-module__FCEBCW__button:focus,.dark-mode-toggle-module-scss-module__FCEBCW__button:hover{border-color:var(--border-color-hover)}.dark-mode-toggle-module-scss-module__FCEBCW__button:focus svg,.dark-mode-toggle-module-scss-module__FCEBCW__button:hover svg{color:var(--color-hover)}.dark-mode-toggle-module-scss-module__FCEBCW__button:focus-visible{outline:2px solid var(--border-color-hover);outline-offset:2px}
.dev-tools-module-scss-module__QyM8VG__devTools{bottom:var(--space-16);right:var(--space-16);z-index:100;position:fixed}.dev-tools-module-scss-module__QyM8VG__panel{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--space-6);bottom:calc(100% + var(--space-6));box-shadow:0 var(--space-4) var(--space-16) #0000003d;gap:var(--space-6);opacity:0;padding:var(--space-8);pointer-events:none;transform:translateY(var(--space-6));flex-direction:column;width:max-content;font-size:.8125rem;transition:opacity .15s ease-in-out,transform .15s ease-in-out;display:flex;position:absolute;right:0}.dev-tools-module-scss-module__QyM8VG__isOpen{opacity:1;pointer-events:auto;transform:translateY(0)}.dev-tools-module-scss-module__QyM8VG__heading{color:var(--color-text-muted);letter-spacing:.05em;text-transform:uppercase;font-weight:600}.dev-tools-module-scss-module__QyM8VG__row{color:var(--color-text);align-items:center;gap:var(--space-10);justify-content:space-between;display:flex}.dev-tools-module-scss-module__QyM8VG__toggle{background-color:var(--color-accent);color:var(--color-white);cursor:pointer;height:var(--space-28);width:var(--space-28);border:none;border-radius:50%;justify-content:center;align-items:center;display:flex}.dev-tools-module-scss-module__QyM8VG__toggle svg{fill:currentColor;height:var(--space-12);width:auto}.dev-tools-module-scss-module__QyM8VG__toggle:focus-visible,.dev-tools-module-scss-module__QyM8VG__toggle:hover{border-color:var(--color-accent-600)}.dev-tools-module-scss-module__QyM8VG__toggle:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}
.link-module-scss-module__S7gRGq__link{--color-anchor:var(--color-accent);color:var(--color-anchor);display:inline-block}.link-module-scss-module__S7gRGq__link:active,.link-module-scss-module__S7gRGq__link:focus:not(:focus-visible),.link-module-scss-module__S7gRGq__link:focus-within,.link-module-scss-module__S7gRGq__link:hover{text-decoration:underline}.link-module-scss-module__S7gRGq__decorated:not(:has(img)){border-bottom:3px solid var(--color-accent);--color-anchor:var(--color-white);text-decoration:none;transition:box-shadow .2s;box-shadow:inset 0 0 0 10em #0652dc33}.link-module-scss-module__S7gRGq__decorated:not(:has(img)):active{border-bottom-color:var(--color-accent);outline:none;text-decoration:none;box-shadow:inset 0 0 0 10em #0652dc66}.link-module-scss-module__S7gRGq__decorated:not(:has(img)):focus:not(:focus-visible){border-bottom-color:var(--color-accent);outline:none;text-decoration:none;box-shadow:inset 0 0 0 10em #0652dc66}.link-module-scss-module__S7gRGq__decorated:not(:has(img)):focus-within{border-bottom-color:var(--color-accent);outline:none;text-decoration:none;box-shadow:inset 0 0 0 10em #0652dc66}.link-module-scss-module__S7gRGq__decorated:not(:has(img)):hover{border-bottom-color:var(--color-accent);outline:none;text-decoration:none;box-shadow:inset 0 0 0 10em #0652dc66}.link-module-scss-module__S7gRGq__decorated:not(:has(img)):focus-visible{box-shadow:0 0 0 2px var(--color-focus-ring);background-color:#0000;border-color:#0000;border-radius:max(2px,.08em);outline:none;position:relative}.light-mode .link-module-scss-module__S7gRGq__decorated{--color-anchor:var(--color-black)}
.heading-module-scss-module__aeXNNW__heading{color:var(--colour);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--font-line);margin:0}.heading-module-scss-module__aeXNNW__anchor{flex-direction:row-reverse;justify-content:flex-end;align-items:center;display:flex}.heading-module-scss-module__aeXNNW__anchor a{margin-right:var(--space-3);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--font-line)}.heading-module-scss-module__aeXNNW__inherit{font-size:inherit;font-weight:inherit;line-height:inherit}
.blockquote-module-scss-module__ar49OW__blockquote{max-width:var(--width-10)}.blockquote-module-scss-module__ar49OW__quote{font-size:var(--font-large-size);font-weight:var(--font-large-weight);line-height:var(--font-large-line);margin:0}.blockquote-module-scss-module__ar49OW__quote strong{color:var(--color-accent-300);font-weight:inherit}.light-mode .blockquote-module-scss-module__ar49OW__quote strong{color:var(--color-accent-900);font-weight:500}.blockquote-module-scss-module__ar49OW__footer{margin-top:var(--space-12);display:block}.blockquote-module-scss-module__ar49OW__cite{font-size:var(--font-regular-size);font-style:normal;font-weight:var(--font-regular-weight);line-height:var(--font-regular-line)}
.technology-module-scss-module__GkyLba__jest{fill:#c63d14}.technology-module-scss-module__GkyLba__jestoutline{fill:var(--color-white)}.light-mode .technology-module-scss-module__GkyLba__jestoutline{fill:var(--color-black)}.technology-module-scss-module__GkyLba__nextjs{fill:var(--color-white)}.light-mode .technology-module-scss-module__GkyLba__nextjs{fill:var(--color-black)}
.grid-module-scss-module__ooz3xW__grid{flex-direction:var(--grid-flex-direction,column);gap:var(--gap);max-width:var(--width-12);margin:0 auto;display:flex}@media (min-width:768px){.grid-module-scss-module__ooz3xW__grid{gap:0 var(--gap);grid-template-columns:repeat(var(--columns), 1fr);justify-content:space-between;display:grid}}
@media (min-width:768px){.column-module-scss-module__XWKkZW__column{grid-column:span var(--span)}.column-module-scss-module__XWKkZW__column:last-child{grid-column-end:-1}}
.image-module-scss-module__K6513W__image{object-fit:var(--fill)}.image-module-scss-module__K6513W__aspect{aspect-ratio:var(--aspect-ratio);height:100%}
.code-module-scss-module__TJOgTq__code *{font-style:normal}
.youtube-module-scss-module__nDvm8G__youtube{max-width:100%;height:0;padding-bottom:56.25%;position:relative;overflow:hidden}.youtube-module-scss-module__nDvm8G__iframe{width:100%;height:100%;position:absolute;top:0;left:0}
.intro-module-scss-module__qeXIvW__intro{gap:var(--rhythm-loose) var(--space-12);max-width:var(--width-12);grid-template-columns:repeat(12,1fr);margin:0 auto;display:grid}.intro-module-scss-module__qeXIvW__intro>*{grid-column:span 12}@media (min-width:992px){.intro-module-scss-module__qeXIvW__intro>*{grid-column:1/span 9}}
.list-module-scss-module__2Tc2hW__list{max-width:60ch;padding-left:var(--padding-left);color:var(--colour);font-size:var(--font-regular-size);font-weight:var(--font-regular-weight);line-height:var(--font-regular-line);text-wrap:balance;margin:0}
.stack-module-scss-module__fd3lhW__stack{flex-direction:var(--direction,column);gap:var(--gap,var(--space-12));align-items:var(--align,normal);justify-content:var(--justify,normal);flex-wrap:var(--wrap,nowrap);margin:0;padding-left:0;list-style:none;display:flex}
.text-module-scss-module__2QRmvG__text{display:var(--display,block);max-width:60ch;color:var(--colour);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--font-line);text-wrap:balance;margin:0}.text-module-scss-module__2QRmvG__text strong{color:var(--color-accent);font-weight:inherit}
.footer-module-scss-module__p2IoJa__footer{border-top:2px solid var(--color-neutral-800);margin-top:var(--space-90);padding:var(--space-30) var(--space-12);width:100%}@media (min-width:768px){.footer-module-scss-module__p2IoJa__footer{padding:var(--space-74) 0 var(--space-90)}}.footer-module-scss-module__p2IoJa__contents{max-width:var(--width-12);padding:0 var(--space-12);width:100%;margin:0 auto}.footer-module-scss-module__p2IoJa__socials{align-items:center;gap:var(--space-10);--color:var(--color-white);display:flex}.light-mode .footer-module-scss-module__p2IoJa__socials{--color:var(--color-neutral-900)}.footer-module-scss-module__p2IoJa__socials a{color:var(--color);width:var(--space-16)}
.button-module-scss-module__SZaDTG__button{background-color:var(--color-neutral-800);color:var(--color-white);padding:var(--space-4) var(--space-8);border:none}
.header-module-scss-module__dbVH1G__contents{max-width:var(--width-15);padding:var(--space-12);justify-content:space-between;align-items:center;margin:0 auto;display:flex}@media (min-width:992px){.header-module-scss-module__dbVH1G__contents{padding:var(--space-16) var(--space-24)}}.header-module-scss-module__dbVH1G__toggle{all:unset;z-index:3;position:relative}.header-module-scss-module__dbVH1G__toggle svg{height:var(--space-20);fill:var(--color-white)}.light-mode .header-module-scss-module__dbVH1G__toggle svg{fill:var(--color-neutral-800)}@media (min-width:992px){.header-module-scss-module__dbVH1G__toggle{display:none}}
.youtube-module-scss-module__ntkUua__article{position:relative}.youtube-module-scss-module__ntkUua__button{all:unset;cursor:pointer;z-index:2;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.youtube-module-scss-module__ntkUua__button:hover .youtube-module-scss-module__ntkUua__playIcon,.youtube-module-scss-module__ntkUua__button:focus-visible .youtube-module-scss-module__ntkUua__playIcon{opacity:1;transform:scale(1.1)}.youtube-module-scss-module__ntkUua__button:hover~.youtube-module-scss-module__ntkUua__imageWrapper,.youtube-module-scss-module__ntkUua__button:focus-visible~.youtube-module-scss-module__ntkUua__imageWrapper{filter:brightness(.85)}.youtube-module-scss-module__ntkUua__playIcon{width:var(--space-64);height:var(--space-64);opacity:.85;pointer-events:none;transition:opacity .2s,transform .2s}.youtube-module-scss-module__ntkUua__playIconBg{fill:var(--color-black);opacity:.6}.youtube-module-scss-module__ntkUua__playIconTriangle{fill:var(--color-white)}.youtube-module-scss-module__ntkUua__imageWrapper{transition:filter .2s}.youtube-module-scss-module__ntkUua__iframe{z-index:3;width:100%;height:100%;position:absolute;top:0;left:0}
.logo-module-scss-module__tf3tlq__logo a{display:flex}.logo-module-scss-module__tf3tlq__logo svg{height:var(--space-20);fill:var(--color-white)}.light-mode .logo-module-scss-module__tf3tlq__logo svg{fill:var(--color-neutral-800)}
.author-module-scss-module__aWHL8a__author{margin:var(--space-8) auto var(--space-48);max-width:var(--width-10);font-size:var(--font-regular-size);font-style:italic;line-height:var(--font-regular-line);text-align:center;font-weight:400;display:block}
.menu-module-scss-module__iif4Zq__menu{--background:var(--color-surface);--color:var(--color-white)}.light-mode .menu-module-scss-module__iif4Zq__menu{--background:var(--color-white);--color:var(--color-black)}.menu-module-scss-module__iif4Zq__menu{background-color:var(--background);gap:var(--space-18);width:100%;height:100%;padding:var(--space-12);z-index:2;flex-direction:column;transition:transform .2s ease-in-out;display:flex;position:fixed;top:0;left:0;transform:translate(100%)}@media (min-width:992px){.menu-module-scss-module__iif4Zq__menu{top:initial;left:initial;width:initial;height:initial;background-color:initial;transform:initial;flex-direction:row;padding:0;transition:none;position:relative}}.menu-module-scss-module__iif4Zq__menu a{color:var(--color);font-size:var(--font-navigation-size);font-weight:var(--font-navigation-weight);line-height:var(--font-navigation-line)}.menu-module-scss-module__iif4Zq__menu a:active,.menu-module-scss-module__iif4Zq__menu a:focus:not(:focus-visible),.menu-module-scss-module__iif4Zq__menu a:focus-within,.menu-module-scss-module__iif4Zq__menu a:hover,.menu-module-scss-module__iif4Zq__menu a[aria-current=page]{text-decoration:underline}.menu-module-scss-module__iif4Zq__isMenuOpen{transform:translate(0)}
.meta-module-scss-module__yesLaG__meta{margin:var(--space-32) auto 0;text-align:left;max-width:75ch;color:var(--color-neutral-500);padding:var(--space-4) 0;border-top:1px solid var(--color-neutral-500);border-bottom:1px solid var(--color-neutral-500);font-weight:400;line-height:1.1;display:flex}.meta-module-scss-module__yesLaG__item{display:inline-block}.meta-module-scss-module__yesLaG__item+.meta-module-scss-module__yesLaG__item:before{content:"•";margin:0 var(--space-4)}
.main-module-scss-module__t8iYka__main{max-width:var(--width-12);padding:var(--rhythm-section) var(--space-12) 0;width:100%;margin:0 auto}
.notice-module-scss-module__rzrQBa__notice{padding:var(--space-12) 0;border-top:1px solid var(--color-neutral-300);border-bottom:1px solid var(--color-neutral-300);color:var(--color-neutral-300)}
.card-module-scss-module__qEF_Fa__card{border-radius:4px;display:block;position:relative;overflow:hidden}.card-module-scss-module__qEF_Fa__card:before{content:"";background-color:var(--color-accent-800);opacity:0;z-index:2;width:100%;height:100%;transition:opacity .15s ease-in-out;display:block;position:absolute;top:0;left:0}.card-module-scss-module__qEF_Fa__card:active:before,.card-module-scss-module__qEF_Fa__card:focus-visible:before,.card-module-scss-module__qEF_Fa__card:hover:before{opacity:.4}.card-module-scss-module__qEF_Fa__image{background-color:var(--color-accent-800);width:100%}.card-module-scss-module__qEF_Fa__contents{padding:var(--space-4) 0}.card-module-scss-module__qEF_Fa__title{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.card-module-scss-module__qEF_Fa__tags{gap:var(--space-2);margin:var(--space-2) 0 0;flex-wrap:wrap;padding:0;list-style:none;display:flex}.card-module-scss-module__qEF_Fa__tags li{color:var(--color-neutral-500);font-size:.75rem}.card-module-scss-module__qEF_Fa__tags li:not(:last-child):after{content:"·";margin-left:var(--space-2)}
.device-previews-module-scss-module__5WJ7na__deviceWrapper{width:100%;max-width:300px}.device-previews-module-scss-module__5WJ7na__device{background-size:cover;position:relative}.device-previews-module-scss-module__5WJ7na__device:after{content:"";pointer-events:none;background-size:cover;width:100%;height:100%;display:block;position:absolute}.device-previews-module-scss-module__5WJ7na__screen{pointer-events:auto;background-size:cover;position:absolute}.device-previews-module-scss-module__5WJ7na__screen>div{width:100%;height:100%;padding-bottom:0;position:absolute;inset:0}.device-previews-module-scss-module__5WJ7na__macbook .device-previews-module-scss-module__5WJ7na__device{padding-bottom:57.5157%}.device-previews-module-scss-module__5WJ7na__macbook .device-previews-module-scss-module__5WJ7na__device .device-previews-module-scss-module__5WJ7na__screen{width:75.1566%;height:81.7604%;top:7.35027%;left:12.4217%}.device-previews-module-scss-module__5WJ7na__macbook .device-previews-module-scss-module__5WJ7na__device:after{content:"";z-index:-1;background-image:url(/images/device-mockups/Macbook2015/portrait_white.png)}.device-previews-module-scss-module__5WJ7na__macbook .device-previews-module-scss-module__5WJ7na__device .device-previews-module-scss-module__5WJ7na__button{width:100%;height:100%;display:none;top:0%;left:0%}.device-previews-module-scss-module__5WJ7na__iphone .device-previews-module-scss-module__5WJ7na__device{padding-bottom:203.103%}.device-previews-module-scss-module__5WJ7na__iphone .device-previews-module-scss-module__5WJ7na__device .device-previews-module-scss-module__5WJ7na__screen{width:87.3563%;height:76.0611%;top:11.9977%;left:6.2069%}.device-previews-module-scss-module__5WJ7na__iphone .device-previews-module-scss-module__5WJ7na__device:after{content:"";z-index:-1;background-image:url(/images/device-mockups/iPhone7/portrait_white.png)}.device-previews-module-scss-module__5WJ7na__iphone .device-previews-module-scss-module__5WJ7na__device .device-previews-module-scss-module__5WJ7na__button{width:15.7471%;height:7.75325%;top:89.5303%;left:42.2989%}.device-previews-module-scss-module__5WJ7na__wrapper{gap:var(--space-24);flex-direction:column;display:flex}@media (min-width:1200px){.device-previews-module-scss-module__5WJ7na__wrapper{flex-direction:row;align-items:flex-end}.device-previews-module-scss-module__5WJ7na__wrapper .device-previews-module-scss-module__5WJ7na__deviceWrapper{max-width:none}.device-previews-module-scss-module__5WJ7na__wrapper .device-previews-module-scss-module__5WJ7na__deviceWrapper.device-previews-module-scss-module__5WJ7na__macbook{width:78%}.device-previews-module-scss-module__5WJ7na__wrapper .device-previews-module-scss-module__5WJ7na__deviceWrapper.device-previews-module-scss-module__5WJ7na__iphone{width:22%}}
.post-module-scss-module__1yL-rW__post{max-width:75ch;margin:0 auto}.post-module-scss-module__1yL-rW__post h1{text-align:center;max-width:32rem;margin:4rem auto 0;font-size:3.5rem;font-weight:200;line-height:1.1;display:block}.post-module-scss-module__1yL-rW__post>div{margin-bottom:var(--rhythm-loose);margin-top:var(--rhythm-loose)}.post-module-scss-module__1yL-rW__post>p:has(img){margin-bottom:var(--rhythm-spacious);margin-top:var(--rhythm-spacious)}.post-module-scss-module__1yL-rW__post>p:first-of-type{margin-top:0}.post-module-scss-module__1yL-rW__post>p:first-of-type:first-letter{margin-right:.1rem;font-size:225%;line-height:1}:is(.post-module-scss-module__1yL-rW__post>div:has(h2),.post-module-scss-module__1yL-rW__post>div:has(h3),.post-module-scss-module__1yL-rW__post>div:has(h4),.post-module-scss-module__1yL-rW__post>div:has(h5)){margin-bottom:var(--rhythm-default)}.post-module-scss-module__1yL-rW__post>*+*{margin-top:var(--rhythm-default)}.post-module-scss-module__1yL-rW__post>div:has(h2)+*{margin-top:var(--rhythm-loose)}.post-module-scss-module__1yL-rW__post>img+*,.post-module-scss-module__1yL-rW__post>figure+*{margin-top:var(--rhythm-loose)}.post-module-scss-module__1yL-rW__post>*+div:has(h2){margin-top:var(--rhythm-section)}.post-module-scss-module__1yL-rW__post>*+div:has(h3){margin-top:var(--rhythm-spacious)}.post-module-scss-module__1yL-rW__post>*+img{margin-top:var(--rhythm-loose)}.post-module-scss-module__1yL-rW__post>*+div:has(h4){margin-top:var(--rhythm-loose)}.post-module-scss-module__1yL-rW__post>img+img,.post-module-scss-module__1yL-rW__post>figure+figure{margin-top:var(--rhythm-loose)}.post-module-scss-module__1yL-rW__post>div:has(h2)+div:has(h3){margin-top:var(--rhythm-loose)}.post-module-scss-module__1yL-rW__post>div:has(h3)+div:has(h4){margin-top:var(--rhythm-loose)}

.items-module-scss-module__MQ6hbq__navigation{gap:var(--space-2);margin-bottom:var(--space-8);flex-wrap:wrap;display:flex}.items-module-scss-module__MQ6hbq__tag{padding:var(--space-2) var(--space-4);font-size:.875rem}.items-module-scss-module__MQ6hbq__tagActive{background-color:var(--color-accent-800)}
.items-module-scss-module__LNNg3a__label{font-weight:600}.items-module-scss-module__LNNg3a__navigation{gap:var(--space-2);flex-wrap:wrap;display:flex}.items-module-scss-module__LNNg3a__tag{padding:var(--space-2) var(--space-4);font-size:.875rem}.items-module-scss-module__LNNg3a__tagActive{background-color:var(--color-accent-800)}
.theme-module-scss-module__T-AWSG__page{padding:var(--space-32) var(--space-16)}.theme-module-scss-module__T-AWSG__title{margin-bottom:var(--space-32)}.theme-module-scss-module__T-AWSG__section{margin-bottom:var(--space-64)}.theme-module-scss-module__T-AWSG__sectionTitle{margin-bottom:var(--space-16)}.theme-module-scss-module__T-AWSG__familyLabel{margin-bottom:var(--space-8);text-transform:capitalize}.theme-module-scss-module__T-AWSG__swatchRow{gap:var(--space-8);margin-bottom:var(--space-24);flex-wrap:wrap;display:flex}.theme-module-scss-module__T-AWSG__swatch{width:6.25rem}.theme-module-scss-module__T-AWSG__swatchColor{border-radius:var(--space-4);border:1px solid var(--color-neutral-100);width:100%;height:4rem}.theme-module-scss-module__T-AWSG__swatchLabel{margin-top:var(--space-4);display:block}.theme-module-scss-module__T-AWSG__typeRow{align-items:baseline;gap:var(--space-16);padding:var(--space-8) 0;border-bottom:1px solid var(--color-neutral-100);display:flex}.theme-module-scss-module__T-AWSG__typeLabel{flex-shrink:0;width:6.25rem}.theme-module-scss-module__T-AWSG__scaleTable{gap:var(--space-2);flex-direction:column;display:flex}.theme-module-scss-module__T-AWSG__scaleRow{align-items:center;gap:var(--space-8);display:flex}.theme-module-scss-module__T-AWSG__scaleLabel{text-align:right;white-space:nowrap;flex-shrink:0;width:5.5rem}.theme-module-scss-module__T-AWSG__scaleBar{height:var(--space-8);background:var(--color-accent-500);border-radius:var(--space-2)}
.series-module-scss-module__NPhC8W__intro{align-items:flex-start;gap:var(--rhythm-section);flex-direction:column-reverse;display:flex}@media (min-width:992px){.series-module-scss-module__NPhC8W__intro{flex-direction:row;align-items:center}.series-module-scss-module__NPhC8W__image{flex-shrink:0}}