.example-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:0 .75rem;border-top:1px solid var(--toolbar-border-color, #e0e0e0);background:var(--toolbar-bg, #f5f5f5);font-size:.8rem;min-height:2rem}.example-toolbar-controls{display:flex;align-items:stretch;align-self:stretch}.example-toolbar-control{padding:0 .75rem;border:none;background:none;font:inherit;font-size:.8rem;cursor:pointer;color:var(--toolbar-text-color, #666);border-top:2px solid transparent}.example-toolbar-control.active{color:var(--toolbar-accent-color, #c41e47);border-top-color:var(--toolbar-accent-color, #c41e47)}.example-toolbar-control[disabled]{color:var(--toolbar-disabled-color, #aaa);cursor:default}.example-toolbar-links{display:flex;align-items:center;gap:.75rem}.example-toolbar-sep{width:1px;height:.9em;background:var(--toolbar-border-color, #ccc)}.example-toolbar-links a{color:var(--toolbar-accent-color, #0369a1);text-decoration:none;white-space:nowrap}.example-toolbar-links a:hover{text-decoration:underline}.toolbar-link-icon{width:1em;height:1em;vertical-align:-.1em;margin-right:.25em}:root{--grid-size: 1000px;--grid-h-padding: 2em;--showcase-width: 1400px;--showcase-height: 800px;--showcase-max-height: calc(100vh - 2em) ;--transition: all ease-out .3s;--hover-opacity: .7}.text-grey{color:var(--grey)}.text-ruby{color:var(--ruby)}html{scroll-behavior:smooth}body{font-size:1.2em;font-family:Public Sans,Lato,Arial,sans-serif;margin:0;padding:0;display:flex;flex-direction:column;min-height:100vh}pre,code{font-family:Cascadia,monospace;background:var(--cream)}a{color:#000;transition:var(--transition)}a:hover{color:var(--dark-grey)}main{flex-grow:1}.row{display:flex;flex-direction:row;justify-content:space-between;column-gap:1em}.row>*{flex-grow:1;flex-basis:0}.button{display:inline-flex;align-items:center;gap:.4em;text-decoration:none;padding:.8em 1.4em;font-size:1em;font-family:Hauora,Roboto,Arial,sans-serif;border:none;outline:none;cursor:pointer;transition:var(--transition);text-align:center}.button:not([disabled]):hover{opacity:var(--hover-opacity)}.button-icon{width:1.2em;height:1.2em;vertical-align:-.15em}.button-primary{background:var(--ruby);color:#fff!important}.button-outline{background:transparent;border:2px solid black;color:#000!important}.v4-notice{background:var(--cream);text-align:center;padding:.5rem 1rem;font-size:.85rem;border-bottom:1px solid var(--light-grey);line-height:1.75}.v4-notice a{color:var(--ruby)}.hero{max-width:var(--grid-size);margin:0 auto;padding:14em var(--grid-h-padding) 10em;text-align:center}.hero h1{font-size:2.4em;margin:0 0 .3em;display:flex;align-items:center;justify-content:center}.hero .hero-logo{height:1em;margin-right:.2em}.hero .tagline{font-family:Hauora,Roboto,Arial,sans-serif;font-size:1.6em;font-weight:700;margin:0 0 .5em}.hero .subtitle{font-size:1.15em;color:var(--dark-grey);margin:0 auto 1em;max-width:550px;line-height:1.5}.hero .subtitle a{color:var(--dark-grey);text-decoration:underline}.hero .ctas{display:flex;gap:1em;justify-content:center;flex-wrap:wrap}.showcase{max-width:var(--showcase-width);margin:0 auto;padding:0 var(--grid-h-padding) 3em;--toolbar-border-color: var(--light-grey);--toolbar-bg: var(--cream);--toolbar-text-color: var(--dark-grey);--toolbar-accent-color: var(--ruby);--toolbar-disabled-color: var(--grey)}.showcase .wrapper{position:relative;border:var(--border);box-sizing:border-box;overflow:hidden}.showcase iframe{display:block;width:100%;height:var(--showcase-height);max-height:var(--showcase-max-height);border:none}.showcase .example-toolbar{position:relative;z-index:1}.showcase .overlay{position:absolute;inset:0;color:#fff;padding:3em;font-size:1.5em;display:flex;flex-direction:column;justify-content:center;cursor:pointer;background:#fff6;transition:var(--transition);overflow:hidden}.showcase .overlay:hover{background:#fff9}.showcase .overlay.hide{display:none}.showcase .overlay h2{margin:0 0 1px}.showcase .overlay .bg{display:inline-block;padding:4px 8px;background:#e22653dd}.showcase .overlay:hover .bg{background:var(--ruby)}.why-sigma{max-width:var(--grid-size);margin:0 auto;padding:3em var(--grid-h-padding)}.why-sigma h2{text-align:center;margin-bottom:1.5em}.why-sigma .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5em}.why-sigma .card{padding:1.5em;border:var(--border)}.why-sigma .card h3{display:flex;align-items:center;gap:.4em;margin:0 0 .5em;font-size:1.05em}.why-sigma .card .card-icon{width:1.2em;height:1.2em;flex-shrink:0;color:var(--ruby)}.why-sigma .card p{margin:0;font-size:.9em;line-height:1.5;color:var(--dark-grey)}.why-sigma .card p a{color:var(--dark-grey)}.in-the-wild{max-width:var(--grid-size);margin:0 auto;padding:3em var(--grid-h-padding)}.in-the-wild h2{text-align:center}.in-the-wild .intro{text-align:center;color:var(--dark-grey);margin-bottom:2em}.in-the-wild .thumbnail{display:block;overflow:hidden;border:var(--border);transition:var(--transition)}.in-the-wild .thumbnail>div{height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;background-blend-mode:multiply;background-color:#d3d3d3;transition:var(--transition)}.in-the-wild .thumbnail:hover{border-color:var(--dark-grey)}.in-the-wild .thumbnail:hover>div{background-color:transparent}.in-the-wild .sumup{padding:.8em 0}.in-the-wild .sumup h3,.in-the-wild .sumup p{margin:0}.in-the-wild .sumup p{font-size:.85em;color:var(--dark-grey)}.in-the-wild .featured{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5em;margin-bottom:1.5em}.in-the-wild .featured .thumbnail{height:220px}.in-the-wild .others{display:grid;grid-template-columns:repeat(4,1fr);gap:1em}.in-the-wild .others .thumbnail{height:140px}footer{padding:2em var(--grid-h-padding);max-width:var(--grid-size);margin:auto}footer ul{list-style:none;padding:0}.footer-icon{width:1em;height:1em;vertical-align:text-bottom;margin-right:.2em}@media(max-width:1024px){.why-sigma .cards{grid-template-columns:repeat(2,1fr)}.in-the-wild .others{grid-template-columns:repeat(3,1fr)}}@media(max-width:768px){body{font-size:1em}.hero{padding:5em 1.5em 4em}.hero h1{font-size:1.8em}.hero .tagline{font-size:1.3em}.showcase{padding:0 0 2em}.showcase .overlay{font-size:1em}.why-sigma .cards,.in-the-wild .featured{grid-template-columns:1fr}.in-the-wild .others{grid-template-columns:repeat(2,1fr)}.row{display:block}}