:root{--coral:hsl(23,83%,82%);--coral--b:hsl(23,99%,75%);--pink:hsl(335,52%,92%);--pink--b:hsl(335,82%,86%);--yellow:hsl(42,97%,85%);--yellow--b:hsl(42,100%,73%);--green:hsl(100,64%,86%);--green--b:hsl(100,41%,76%);--blue:hsl(187,61%,79%);--blue--b:hsl(187,54%,68%);--purple:hsl(283,24%,86%);--purple--b:hsl(283,43%,80%);--light-gray-blue:hsl(182,29%,96%);--pageMax:1260px;--headerHeight:60px;--middleHeight:300px;--footerHeight:100px}@import url(https://ssr-www.pages.dev/css2?family=Inconsolata&display=swap&kwid=1elmwp-dlldofbsjp-%2560ln);body{margin:0;padding:0;font-family:system-ui,sans-serif}h2{margin:0}ul,ol{margin:0;padding:0}style,code{font-family:"Inconsolata",monospace}.coral{background-color:var(--coral);border:1px solid var(--coral--b)}.pink{background-color:var(--pink);border:1px solid var(--pink--b)}.yellow{background-color:var(--yellow);border:1px solid var(--yellow--b)}.green{background-color:var(--green);border:1px solid var(--green--b)}.blue{background-color:var(--blue);border:1px solid var(--blue--b)}.purple{background-color:var(--purple);border:1px solid var(--purple--b)}.white{background-color:white}.meta h1{font-size:4rem;font-weight:300}.meta p{font-size:1.2rem;line-height:1.5;font-weight:300}.meta a{color:hsl(207,90%,54%)}section:nth-child(2n){background-color:var(--light-gray-blue)}section:nth-child(2n) .code-container,section:nth-child(2n) .tab-area button.active{background-color:white}.section-title{display:flex;flex-direction:column;align-items:flex-start}.section-title code{display:block;width:auto;font-size:0.8em;margin-left:2em}.ex-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));grid-gap:2rem}.ex-container{resize:both;position:relative;overflow:hidden;height:100%;width:100%;z-index:2;box-shadow:0 0 20px -10px hsl(187,97%,24%);display:grid;align-items:center;background:white}.meta,.footer{text-align:center;padding:4rem;margin:0 auto}.footer a{color:white;color:hsl(207,90%,54%)}.code-area{display:grid;grid-template-rows:auto 1fr auto;height:400px}.code-container{white-space:pre-wrap;display:none;overflow-y:scroll;background-color:var(--light-gray-blue);margin-bottom:1rem;padding:1rem;border:1px solid var(--blue);margin-top:-1px;font-size:1.35rem}.tab-area{display:grid;width:50%;justify-self:end;grid-template-columns:1fr 1fr}.tab-area button{border:none;border-radius:0.5rem 0.5rem 0 0;padding:0.5rem}.tab-area button.active{border:1px solid var(--blue);border-bottom:none;z-index:1;background:var(--light-gray-blue)}.section-container{max-width:var(--pageMax);margin:0 auto;padding:4rem 2rem}.codepen-link{text-align:right}.parent{width:100%;height:100%}.taglist{display:flex}.taglist li{padding:0.2rem 0.5rem;border-radius:1rem;font-size:14px;list-style:none}.taglist li+li{margin-left:0.5rem}.meta-area{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:center;margin-bottom:1rem}.support-area{display:grid;justify-content:flex-end}.support-area span{justify-self:flex-end;margin-bottom:0.25rem}.codepen-link{color:hsl(187,83%,37%);font-style:italic}.box{font-size:2rem;padding:1rem;display:grid;place-items:center;border-radius:1rem;border-style:dashed}.ex-container .section{font-size:1.5rem;padding:1rem;border-style:dashed}@media screen and (min-width:811px){.ex-section{height:400px}.section-container{padding:8rem 4rem}.meta{max-width:46ch;padding:8rem auto}}@media screen and (max-width:811px){.ex-container{height:300px}.ex-section{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.box{font-size:1rem}.ex-container .section{font-size:1rem}.section-title code{margin-left:0;margin-top:1rem}.support-area{margin-top:1rem;margin-bottom:0.5rem}.code-area{height:300px}.code-container{font-size:1.15rem}}.yt-embed{padding-top:56.25%;position:relative;width:100%}.yt-embed iframe{height:100%;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%}body::-webkit-scrollbar{width:0.75rem}body::-webkit-scrollbar-track{background-color:transparent;border:1px solid var(--blue--b)}body::-webkit-scrollbar-thumb{background-color:var(--blue)}