:host:not([data-theme=dark]),
:root:not([data-theme=dark]),
[data-theme=light] {
  --pico-demo-border-gradient-colors:transparent 33%,rgb(232.5, 202.75, 231.75),rgb(220.8, 205.8, 244.3),rgb(208.35, 210.5, 242.25),rgb(202.8, 211.6, 245.4);
  --pico-card-box-shadow:var(--pico-box-shadow);
  --pico-card-component-outline-width:.0625rem;
  --pico-card-component-outline-color:transparent;
  --pico-mark-gradient:linear-gradient(to right, rgb(25, 97, 31), #33790f, rgb(64, 154, 114), rgb(92, 121, 128));
  --pico-stats-color:#2a628a;
  --pico-features-icon-color:rgb(146.9, 76.9, 174.8);
  --pico-comparison-gradient-valid:linear-gradient(var(--pico-comparison-gradient-direction, to bottom), rgb(122.5, 177.5, 197.75), rgb(90, 166.25, 163.75), rgb(100, 154.5, 102));
  --pico-comparison-gradient-invalid:linear-gradient(var(--pico-comparison-gradient-direction, to bottom), rgb(207.5, 160.5, 99.5), rgb(207.125, 126.125, 109.375), rgb(212.25, 108.25, 99.25));
  --pico-badge-html-background-color:rgba(168, 52, 16, .125);
  --pico-badge-html-color:#a83410;
  --pico-badge-react-background-color:rgba(34.5, 113.875, 142.75, .125);
  --pico-badge-react-color:rgb(34.5, 113.875, 142.75);
  --pico-badge-sass-background-color:rgba(149.5, 44.75, 123.5, .125);
  --pico-badge-sass-color:rgb(149.5, 44.75, 123.5);
  --pico-badge-javascript-background-color:rgba(129.5, 83.5, 0, .125);
  --pico-badge-javascript-color:rgb(129.5, 83.5, 0);
  --pico-badge-css-background-color:rgba(29, 89, 208, .125);
  --pico-badge-css-color:#1d59d0
}
@media only screen and (prefers-color-scheme:dark) {
  :host:not([data-theme]),
  :root:not([data-theme]) {
    --pico-demo-border-gradient-colors:transparent 33%,rgb(74.2, 20.8, 68.4),rgb(58.5, 32.5, 85.75),rgb(45, 36.6, 100.9),rgb(26.4, 42.9, 106.7);
    --pico-card-box-shadow:none;
    --pico-card-background-color:rgb(21.5, 25.25, 33.75);
    --pico-card-component-outline-width:.0625rem;
    --pico-card-component-outline-color:rgb(28, 33, 43.5);
    --pico-card-border-color:var(--pico-card-component-outline-color);
    --pico-mark-gradient:linear-gradient(to right, rgb(25, 97, 31), #33790f, rgb(64, 154, 114), rgb(92, 121, 128));
    --pico-stats-color:rgb(120.5, 176, 227);
    --pico-features-icon-color:rgb(184.5, 153, 237.75);
    --pico-comparison-gradient-valid:linear-gradient(var(--pico-comparison-gradient-direction, to bottom), rgb(79.25, 123.5, 148.25), rgb(58.125, 112.625, 115.625), rgb(63, 101.5, 67));
    --pico-comparison-gradient-invalid:linear-gradient(var(--pico-comparison-gradient-direction, to bottom), rgb(138.5, 110, 76.5), rgb(153, 77.625, 63.25), rgb(151.75, 54.5, 52.25));
    --pico-badge-html-background-color:rgba(224.5, 149.5, 127.75, .125);
    --pico-badge-html-color:rgb(224.5, 149.5, 127.75);
    --pico-badge-react-background-color:rgba(78.375, 167.75, 195.125, .125);
    --pico-badge-react-color:rgb(78.375, 167.75, 195.125);
    --pico-badge-sass-background-color:rgba(204.5, 151.5, 199, .125);
    --pico-badge-sass-color:rgb(204.5, 151.5, 199);
    --pico-badge-javascript-background-color:rgba(188, 166.5, 99.5, .125);
    --pico-badge-javascript-color:rgb(188, 166.5, 99.5);
    --pico-badge-css-background-color:rgba(156, 167, 250, .125);
    --pico-badge-css-color:#9ca7fa
  }
}
[data-theme=dark] {
  --pico-demo-border-gradient-colors:transparent 33%,rgb(74.2, 20.8, 68.4),rgb(58.5, 32.5, 85.75),rgb(45, 36.6, 100.9),rgb(26.4, 42.9, 106.7);
  --pico-card-box-shadow:none;
  --pico-card-background-color:rgb(21.5, 25.25, 33.75);
  --pico-card-component-outline-width:.0625rem;
  --pico-card-component-outline-color:rgb(28, 33, 43.5);
  --pico-card-border-color:var(--pico-card-component-outline-color);
  --pico-mark-gradient:linear-gradient(to right, rgb(215.4, 140.8, 210.2), rgb(184.5, 153, 237.75), rgb(156.6, 165.3, 232.6), rgb(142.75, 168.95, 240.05));
  --pico-stats-color:rgb(120.5, 176, 227);
  --pico-features-icon-color:rgb(184.5, 153, 237.75);
  --pico-comparison-gradient-valid:linear-gradient(var(--pico-comparison-gradient-direction, to bottom), rgb(79.25, 123.5, 148.25), rgb(58.125, 112.625, 115.625), rgb(63, 101.5, 67));
  --pico-comparison-gradient-invalid:linear-gradient(var(--pico-comparison-gradient-direction, to bottom), rgb(138.5, 110, 76.5), rgb(153, 77.625, 63.25), rgb(151.75, 54.5, 52.25));
  --pico-badge-html-background-color:rgba(224.5, 149.5, 127.75, .125);
  --pico-badge-html-color:rgb(224.5, 149.5, 127.75);
  --pico-badge-react-background-color:rgba(78.375, 167.75, 195.125, .125);
  --pico-badge-react-color:rgb(78.375, 167.75, 195.125);
  --pico-badge-sass-background-color:rgba(204.5, 151.5, 199, .125);
  --pico-badge-sass-color:rgb(204.5, 151.5, 199);
  --pico-badge-javascript-background-color:rgba(188, 166.5, 99.5, .125);
  --pico-badge-javascript-color:rgb(188, 166.5, 99.5);
  --pico-badge-css-background-color:rgba(156, 167, 250, .125);
  --pico-badge-css-color:#9ca7fa
}
body>main {
  --pico-homepage-spacing-vertical:calc(var(--pico-spacing) * 3);
  --pico-homepage-spacing-horizontal:calc(var(--pico-spacing) * 2);
  padding:0
}
@media (min-width:576px) {
  body>main {
    --pico-homepage-spacing-vertical:calc(var(--pico-spacing) * 4);
    --pico-homepage-spacing-horizontal:calc(var(--pico-spacing) * 2.5)
  }
}
@media (min-width:768px) {
  body>main {
    --pico-homepage-spacing-vertical:calc(var(--pico-spacing) * 5);
    --pico-homepage-spacing-horizontal:calc(var(--pico-spacing) * 3)
  }
}
@media (min-width:1024px) {
  body>main {
    --pico-homepage-spacing-vertical:calc(var(--pico-spacing) * 6);
    --pico-homepage-spacing-horizontal:calc(var(--pico-spacing) * 3.5)
  }
}
body>main.is-loading {
  animation-duration:1s;
  animation-fill-mode:forwards;
  animation-name:page-loading;
  opacity:.5
}
@keyframes page-loading {
  0% {
    opacity:1
  }
}
section {
  margin-block:var(--pico-homepage-spacing-vertical)
}
body>main.homepage>.hero {
  display:grid;
  grid-template-columns:1fr;
  -moz-column-gap:var(--pico-homepage-spacing-horizontal);
  column-gap:var(--pico-homepage-spacing-horizontal);
  row-gap:calc(var(--pico-homepage-spacing-vertical)/ 2);
  justify-items:center;
  margin-top:calc(var(--pico-homepage-spacing-vertical)/ 2);
  margin-bottom:0
}
body>main.homepage>.hero .demo,
body>main.homepage>.hero .hook {
  width:100%;
  min-width:0
}
body>main.homepage>.hero .hook {
  z-index:1;
  position:relative
}
@media (min-width:1024px) {
  body>main.homepage>.hero .hook {
    max-width:700px
  }
}
body>main.homepage>.hero .hook h1,
body>main.homepage>.hero .hook p {
  text-wrap:balance
}
@media (min-width:576px) {
  body>main.homepage>.hero .hook h1,
  body>main.homepage>.hero .hook p {
    text-align:center
  }
}
body>main.homepage>.hero .hook h1 {
  margin-bottom:calc(var(--pico-spacing) * 2)
}
body>main.homepage>.hero .hook .grid.ctas {
  --pico-form-element-spacing-horizontal:2rem;
  margin-top:calc(var(--pico-spacing) * 4);
  margin-bottom:calc(var(--pico-spacing) * .5)
}
@media (min-width:576px) {
  body>main.homepage>.hero .hook .grid.ctas {
    display:flex;
    justify-content:center
  }
}
body>main.homepage>.hero .hook .grid.ctas a[role=button] svg {
  width:auto;
  height:1rem;
  margin-left:calc(var(--pico-spacing) * .25)
}
body>main.homepage>.hero>.demo {
  --angle:0deg;
  --demo-border-gradient:linear-gradient( var(--angle), var(--pico-demo-border-gradient-colors) );
  display:flex;
  position:relative;
  flex-direction:column
}
@supports (-webkit-hyphens:none) {
  body>main.homepage>.hero>.demo {
    animation:none
  }
}
@media (min-width:768px) {
  body>main.homepage>.hero>.demo {
    max-width:700px
  }
}
body>main.homepage>.hero>.demo article.component {
  --pico-block-spacing-horizontal:var(--pico-spacing)!important;
  --pico-block-spacing-vertical:calc(var(--pico-spacing) * 1.5)!important;
  display:flex;
  position:relative;
  flex-direction:column;
  justify-content:flex-start;
  width:100%;
  min-width:0;
  height:100%;
  height:calc(22.8125rem + var(--pico-block-spacing-vertical));
  margin-bottom:0;
  margin-inline:auto;
  overflow:visible;
  outline:0;
  background-color:var(--pico-background-color);
  box-shadow:none;
  pointer-events:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none
}
@media (min-width:576px) {
  body>main.homepage>.hero>.demo article.component {
    --pico-block-spacing-horizontal:calc(var(--pico-spacing) * 1.5)!important;
    --pico-block-spacing-vertical:calc(var(--pico-spacing) * 2)!important;
    height:calc(24.5rem + var(--pico-block-spacing-vertical))
  }
}
@media (min-width:768px) {
  body>main.homepage>.hero>.demo article.component {
    height:calc(24.5rem + var(--pico-block-spacing-vertical))
  }
}
@media (min-width:1024px) {
  body>main.homepage>.hero>.demo article.component {
    height:calc(24rem + var(--pico-block-spacing-vertical))
  }
}
body>main.homepage>.hero>.demo article.component form button,
body>main.homepage>.hero>.demo article.component form input:only-child,
body>main.homepage>.hero>.demo article.component form input[aria-invalid=true],
body>main.homepage>.hero>.demo article.component form[role=group],
body>main.homepage>.hero>.demo article.component form[role=search] {
  margin-bottom:0
}
body>main.homepage>.hero>.demo article.component form small {
  margin-top:.25rem;
  margin-bottom:0
}
body>main.homepage>.hero>.demo article.component form label {
  margin-bottom:0
}
body>main.homepage>.hero>.demo article.component form[role=group].is-focused,
body>main.homepage>.hero>.demo article.component form[role=search].is-focused {
  --pico-group-box-shadow:var(--pico-group-box-shadow-focus-with-button)
}
body>main.homepage>.hero>.demo article.component form[role=group].is-focused input:not([type=checkbox],
[type=radio]),
body>main.homepage>.hero>.demo article.component form[role=group].is-focused select,
body>main.homepage>.hero>.demo article.component form[role=search].is-focused input:not([type=checkbox],
[type=radio]),
body>main.homepage>.hero>.demo article.component form[role=search].is-focused select {
  border-color:transparent
}
body>main.homepage>.hero>.demo article.component form[role=group].is-focused button,
body>main.homepage>.hero>.demo article.component form[role=search].is-focused button {
  box-shadow:none
}
body>main.homepage>.hero>.demo article.component form input {
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none
}
body>main.homepage>.hero>.demo article.component form input:not([type=range]).is-focused {
  --pico-border-color:var(--pico-form-element-active-border-color);
  --pico-box-shadow:0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color)
}
body>main.homepage>.hero>.demo article.component form input:not([type=checkbox]).is-focused {
  --pico-background-color:var(--pico-form-element-active-background-color)
}
body>main.homepage>.hero>.demo article.component form input[type=range].is-focused {
  --pico-range-border-color:var(--pico-range-active-border-color);
  --pico-range-thumb-color:var(--pico-range-thumb-active-color)
}
body>main.homepage>.hero>.demo article.component form input[type=range].is-focused::-webkit-slider-thumb {
  transform:scale(1.25)
}
body>main.homepage>.hero>.demo article.component form input[type=range].is-focused::-moz-range-thumb {
  transform:scale(1.25)
}
body>main.homepage>.hero>.demo article.component form input[type=range].is-focused::-ms-thumb {
  transform:scale(1.25)
}
body>main.homepage>.hero>.demo article.component form button.is-focused {
  --pico-background-color:var(--pico-primary-hover-background);
  --pico-border-color:var(--pico-primary-hover-border);
  --pico-color:var(--pico-primary-inverse);
  --pico-box-shadow:var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),0 0 0 var(--pico-outline-width) var(--pico-primary-focus)
}
body>main.homepage>.hero>.demo article.component form * {
  transition:border-radius var(--pico-transition)
}
body>main.homepage>.hero>.demo article.component footer.code {
  background:0 0
}
body>main.homepage>.hero>.demo article.component footer.code pre {
  overflow:hidden
}
body>main.homepage>.hero>.demo article.component footer.code [data-typeit-id] .ti-cursor {
  transform:translate(-.25em);
  color:inherit;
  font-style:inherit;
  font-weight:inherit;
  font-size:inherit;
  line-height:inherit;
  font-family:inherit
}
body>main.homepage>.hero>.demo article.component .controls {
  display:grid;
  position:absolute;
  right:0;
  bottom:0;
  grid-auto-flow:column;
  padding:var(--pico-spacing);
  pointer-events:all;
  transition:opacity var(--pico-transition);
  grid-gap:calc(var(--pico-spacing) * .25)
}
@media (min-width:1280px) {
  body>main.homepage>.hero>.demo article.component .controls {
    opacity:0
  }
}
body>main.homepage>.hero>.demo article.component .controls svg {
  width:auto;
  height:1rem;
  color:var(--pico-muted-color);
  cursor:pointer;
  transition:color var(--pico-transition)
}
body>main.homepage>.hero>.demo article.component .controls svg:hover {
  color:var(--pico-secondary-hover)
}
body>main.homepage>.hero>.demo article.component:hover .controls {
  opacity:1
}
body>main.homepage>.hero>.demo.is-maximized {
  z-index:999;
  position:fixed;
  max-width:none;
  inset:0;
  transform:none;
  background:var(--pico-background-color)
}
body>main.homepage>.hero>.demo.is-maximized article.component {
  position:unset;
  max-width:none;
  border-radius:0;
  outline:0
}
@media (min-width:576px) {
  body>main.homepage>.hero>.demo.is-maximized article.component {
    max-width:510px;
    height:auto;
    margin:auto
  }
}
@media (min-width:1024px) {
  body>main.homepage>.hero>.demo.is-maximized article.component {
    max-width:700px
  }
}
body>main.homepage>.hero>.demo.is-maximized article.component .controls {
  opacity:1
}
body>main.homepage>.hero>.demo:before {
  z-index:0;
  position:absolute;
  inset:-3rem;
  border-radius:var(--pico-border-radius);
  background:var(--demo-border-gradient);
  content:"";
  filter:blur(3rem);
  opacity:.25
}
body>main.homepage>.hero>.demo:after {
  z-index:-1;
  position:absolute;
  inset:-1px;
  border-radius:var(--pico-border-radius);
  background:var(--demo-border-gradient);
  content:""
}
body>main.homepage>.stats {
  margin-top:calc(var(--pico-homepage-spacing-vertical) * .25)
}
body>main.homepage>.stats ul {
  display:grid;
  -moz-column-gap:calc(var(--pico-spacing) * 2);
  column-gap:calc(var(--pico-spacing) * 2);
  row-gap:calc(var(--pico-spacing) * 2);
  max-width:700px;
  margin:0 auto;
  padding:0
}
@media (min-width:576px) {
  body>main.homepage>.stats ul {
    grid-template-columns:repeat(3,1fr)
  }
}
body>main.homepage>.stats ul li {
  margin:0;
  list-style-type:none
}
@media (min-width:576px) {
  body>main.homepage>.stats ul li {
    text-align:center
  }
}
body>main.homepage>.stats ul li p {
  margin:0
}
body>main.homepage>.stats ul li p.count {
  margin-bottom:calc(var(--pico-spacing) * .25);
  color:var(--pico-stats-color);
  font-size:1.75rem;
  line-height:1.15;
  font-family:Figtree,var(--pico-font-family)
}
body>main.homepage>.stats ul li p.label a {
  text-decoration:none
}
body>main.homepage>.stats ul li p.label a svg {
  display:inline-block;
  width:auto;
  height:1em;
  margin-right:calc(var(--pico-spacing) * .375);
  transform:translateY(-.125em)
}
@media (min-width:576px) {
  body>main.homepage>.stats ul li p.label a svg {
    display:none
  }
}
@media (min-width:768px) {
  body>main.homepage>.stats ul li p.label a svg {
    display:inline-block
  }
}
@media (min-width:576px) {
  body>main.homepage>.stats ul li p.label a span.period-prefix {
    display:none
  }
}
body>main.homepage>.stats ul li p.period-suffix {
  display:none;
  margin-bottom:0;
  color:var(--pico-secondary);
  font-size:14px
}
@media (min-width:576px) {
  body>main.homepage>.stats ul li p.period-suffix {
    display:block
  }
}
body>main.homepage>.features>hgroup {
  max-width:950px;
  margin-bottom:calc(var(--pico-homepage-spacing-vertical) * .75);
  margin-inline:auto
}
@media (min-width:576px) {
  body>main.homepage>.features>hgroup {
    text-align:center
  }
}
body>main.homepage>.features>hgroup>h2 {
  margin-bottom:calc(var(--pico-spacing) * 1)
}
body>main.homepage>.features>hgroup>:not(:first-child):last-child {
  --pico-color:var(--pico-color);
  text-wrap:pretty
}
body>main.homepage>.features>.grid {
  -moz-column-gap:calc(var(--pico-homepage-spacing-horizontal)/ 2);
  column-gap:calc(var(--pico-homepage-spacing-horizontal)/ 2);
  row-gap:calc(var(--pico-homepage-spacing-vertical)/ 2)
}
@media (min-width:768px) {
  body>main.homepage>.features>.grid {
    grid-template-columns:1fr 1fr
  }
}
@media (min-width:1024px) {
  body>main.homepage>.features>.grid {
    grid-template-columns:1fr 1fr 1fr
  }
}
body>main.homepage>.features>.grid article {
  margin-bottom:0;
  margin-block:0;
  border:var(--pico-card-component-outline-width) solid var(--pico-card-component-outline-color)
}
body>main.homepage>.features>.grid article>svg {
  width:auto;
  height:1.125rem;
  margin-bottom:calc(var(--pico-spacing) * .75);
  color:var(--pico-features-icon-color)
}
body>main.homepage>.features>.grid article>svg.pico-icon path {
  fill:currentColor
}
body>main.homepage>.features>.grid article h3 {
  font-size:1.25rem;
  line-height:1.2
}
body>main.homepage>.features>.grid article p {
  margin-bottom:calc(var(--pico-spacing) * 1);
  color:var(--pico-muted-color);
  text-wrap:pretty
}
body>main.homepage>.features>.grid article p:last-child {
  margin-bottom:0
}
body>main.homepage>.features>.grid article p:last-child a svg {
  width:auto;
  height:1rem;
  margin-left:calc(var(--pico-spacing) * .25)
}
body>main.homepage>.signup {
  text-align:center;
  max-width: 100%;
}
@media (min-width:576px) {
  body>main.homepage>.signup {
    /* Set a width that is less than the default container width */
    max-width: 70%; /* Or a specific pixel value like 600px */
    margin-left: auto;
    margin-right: auto;
  }
}

body>main.homepage>.comparison>hgroup {
  max-width:700px;
  margin-bottom:calc(var(--pico-homepage-spacing-vertical) * .75);
  margin-inline:auto
}
@media (min-width:576px) {
  body>main.homepage>.comparison>hgroup {
    text-align:center
  }
}
@media (min-width:768px) {
  body>main.homepage>.comparison>hgroup {
    margin-bottom:calc(var(--pico-homepage-spacing-vertical)/ 3)
  }
}
body>main.homepage>.comparison>hgroup>h2 {
  margin-bottom:calc(var(--pico-spacing) * 1)
}
@media (min-width:768px) {
  body>main.homepage>.comparison>hgroup>h2 {
    margin-bottom:calc(var(--pico-spacing)/ 2)
  }
}
body>main.homepage>.comparison>hgroup>:not(:first-child):last-child {
  --pico-color:var(--pico-color);
  text-wrap:pretty
}
body>main.homepage>.comparison>.grid {
  -moz-column-gap:calc(var(--pico-homepage-spacing-horizontal)/ 2);
  column-gap:calc(var(--pico-homepage-spacing-horizontal)/ 2);
  row-gap:calc(var(--pico-homepage-spacing-vertical)/ 2)
}
@media (min-width:768px) {
  body>main.homepage>.comparison>.grid {
    grid-template-columns:1fr
  }
}
@media (min-width:1024px) {
  body>main.homepage>.comparison>.grid {
    grid-template-columns:repeat(auto-fit,minmax(0%,1fr))
  }
}
body>main.homepage>.comparison>.grid>div {
  display:flex;
  flex-direction:column
}
body>main.homepage>.comparison>.grid>div p .emoji {
  font-size:1.25rem
}
body>main.homepage>.comparison>.grid>div .code {
  height:100%;
  margin-bottom:0;
  border:var(--pico-card-component-outline-width) solid var(--pico-card-component-outline-color);
  background-color:var(--pico-card-background-color)
}
body>main.homepage>.comparison>.grid>div .code:before {
  display:block;
  position:absolute;
  width:.25rem;
  height:100%;
  inset:0 auto 0 0;
  content:""
}
body>main.homepage>.comparison>.grid>div .code pre {
  height:100%
}
@media (min-width:1024px) {
  body>main.homepage>.comparison>.grid>div .code {
    --pico-comparison-gradient-direction:to right
  }
  body>main.homepage>.comparison>.grid>div .code:before {
    width:100%;
    height:.25rem;
    inset:0 0 auto
  }
}
body>main.homepage>.comparison>.grid>div.pico .code:before {
  background:var(--pico-comparison-gradient-valid)
}
body>main.homepage>.comparison>.grid>div.utility-framework .code:before {
  background:var(--pico-comparison-gradient-invalid)
}
body>main.examples>.examples-hero {
  margin-top:calc(var(--pico-homepage-spacing-vertical)/ 2);
  margin-bottom:0
}
@media (min-width:576px) {
  body>main.examples>.examples-hero {
    text-align:center
  }
}
body>main.examples>.examples-list {
  display:grid;
  -moz-column-gap:calc(var(--pico-homepage-spacing-horizontal)/ 2);
  column-gap:calc(var(--pico-homepage-spacing-horizontal)/ 2);
  row-gap:calc(var(--pico-homepage-spacing-vertical)/ 2);
  margin-top:calc(var(--pico-homepage-spacing-vertical)/ 2)
}
@media (min-width:1024px) {
  body>main.examples>.examples-list {
    grid-template-columns:1fr 1fr;
    row-gap:calc(var(--pico-homepage-spacing-horizontal)/ 2)
  }
}
body>main.examples>.examples-list article {
  margin:0;
  outline-color:var(--pico-card-component-outline-color);
  outline-style:solid;
  outline-width:var(--pico-card-component-outline-width)
}
body>main.examples>.examples-list article .badges {
  display:flex;
  margin-bottom:calc(var(--pico-spacing)/ 2)
}
body>main.examples>.examples-list article .badges .badge {
  padding:.125rem .25rem;
  border-radius:.125rem;
  font-weight:600;
  font-size:12px;
  text-transform:uppercase;
  vertical-align:text-bottom
}
body>main.examples>.examples-list article .badges .badge:not(:last-child) {
  margin-right:calc(var(--pico-spacing)/ 2)
}
body>main.examples>.examples-list article .badges .badge.html {
  background-color:var(--pico-badge-html-background-color);
  color:var(--pico-badge-html-color)
}
body>main.examples>.examples-list article .badges .badge.react {
  background-color:var(--pico-badge-react-background-color);
  color:var(--pico-badge-react-color)
}
body>main.examples>.examples-list article .badges .badge.sass {
  background-color:var(--pico-badge-sass-background-color);
  color:var(--pico-badge-sass-color)
}
body>main.examples>.examples-list article .badges .badge.javascript {
  background-color:var(--pico-badge-javascript-background-color);
  color:var(--pico-badge-javascript-color)
}
body>main.examples>.examples-list article .badges .badge.css {
  background-color:var(--pico-badge-css-background-color);
  color:var(--pico-badge-css-color)
}
body>main.examples>.examples-list article h2 {
  font-size:1.25rem;
  line-height:1.2;
  text-wrap:balance;
  margin-bottom:calc(var(--pico-spacing)/ 4)
}
body>main.examples>.examples-list article p {
  color:var(--pico-muted-color);
  text-wrap:pretty
}
body>main.examples>.examples-list article p:not(:last-child) {
  margin-bottom:calc(var(--pico-spacing) * 1.5)
}
body>main.examples>.examples-list article p.links {
  margin-bottom:0
}
body>main.examples>.examples-list article p.links a {
  display:block
}
body>main.examples>.examples-list article p.links a:not(:last-child) {
  margin-bottom:calc(var(--pico-spacing)/ 4)
}
body>main.examples>.examples-list article p.links a svg {
  width:auto;
  height:1rem;
  margin-right:calc(var(--pico-spacing)/ 4);
  transform:translateY(-.0625rem)
}
body>main.examples>.examples-list article p.links a svg.pico-icon path {
  fill:currentColor
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:Figtree,var(--pico-font-family)
}
@media (min-width:576px) {
  h1 {
    --pico-font-size:2.5rem;
    --pico-line-height:1.0625
  }
  h2 {
    --pico-font-size:2rem;
    --pico-line-height:1.125
  }
  h3 {
    --pico-font-size:1.75rem;
    --pico-line-height:1.15
  }
  h4 {
    --pico-font-size:1.5rem;
    --pico-line-height:1.175
  }
  h5 {
    --pico-font-size:1.25rem;
    --pico-line-height:1.2
  }
  h6 {
    --pico-font-size:1.125rem;
    --pico-line-height:1.225
  }
}
.fade-in {
  animation-duration:1s;
  animation-fill-mode:both;
  animation-name:fade-in
}
@keyframes fade-in {
  0% {
    opacity:0
  }
  to {
    opacity:1
  }
}
a .icon-arrow-right {
  --icon-right-toggle-duration:.2s
}
a .icon-arrow-right g.head,
a .icon-arrow-right path.line {
  transition-duration:var(--icon-right-toggle-duration);
  transition-property:transform;
  transition-timing-function:ease-in-out
}
a .icon-arrow-right g.head {
  transform:translate(0)
}
a .icon-arrow-right path.line {
  transform:translate(0) scaleX(0);
  transform-origin:14px
}
a:hover .icon-arrow-right g.head {
  transform:translate(5px)
}
a:hover .icon-arrow-right path.line {
  transform:translate(5px) scaleX(1)
}
h1 mark {
  padding:0;
  background:var(--pico-mark-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}