.container_cwjn7n{max-width:var(--cardMax);margin:0 auto 4rem;position:relative}[type=demo] .card_cwjn7n{box-shadow:0 20px 25px 0 rgba(0,0,0,0.2);border-radius:10px;margin:0 auto;transition:transform .5s;will-change:transform}[type=demo] .card_cwjn7n:hover{transform:translateY(-10px)}[type=resource]{box-shadow:0 20px 25px 0 rgba(0,0,0,0.2);margin-bottom:4rem;background-color:var(--cardBg);border-radius:10px;width:calc(100% - 4rem);transition:transform .5s;will-change:transform}[type=resource]:hover{transform:translateY(-10px)}.demoArea_cwjn7n{display:grid;background:#fff;place-items:center}.demoText_cwjn7n{text-align:center;display:inline-flex;justify-content:center;align-items:center;padding:2rem;margin:0 auto;word-break:break-word;overflow:hidden}.footer_cwjn7n{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;background:#e1e1e1;border-radius:0 0 10px 10px;border:1px solid var(--demoBorder)}.compat_cwjn7n{flex:1 1 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(34px,3pc));padding:.3rem .4rem;margin:0;list-style:none;line-height:1.4}.compat_cwjn7n li{padding:.2rem 0;color:#333;font-size:.7rem;font-weight:500;text-align:center}.compat_cwjn7n li.supported_cwjn7n{color:#000}.compat_cwjn7n li.unsupported_cwjn7n{opacity:.4}.compat_cwjn7n li.canary_cwjn7n,.compat_cwjn7n li.polyfilled_cwjn7n{color:#626262}.compat_cwjn7n img{width:2pc;height:2pc;margin:0 .35rem}.compat_cwjn7n span{display:block}@media (max-width:600px){.compat_cwjn7n img{width:28px;height:28px;margin:0 .2rem}.compat_cwjn7n li{font-size:.6rem}}.links_cwjn7n{margin:0;flex:1;display:flex;flex-wrap:wrap;flex-direction:row;gap:10px;justify-content:flex-end;padding:.75rem}.cardAction_cwjn7n{background:#fff;border:1px solid #d3d3d3;color:#222;border-radius:5px;font-size:9pt;text-decoration:none;text-transform:uppercase;font-weight:800;letter-spacing:.05em;transition-duration:.25s;padding:.25em .5em;cursor:pointer;display:inline-block;text-align:center;position:relative}.cardAction_cwjn7n:hover{color:#fff;background:#77f;border-color:#337}.inputVal_cwjn7n{display:inline-block;margin:0 .25rem 0 1rem;padding:0 .25rem;color:var(--brightBlue);background:none;border:2px solid hsla(0,0%,100%,0.05);border-bottom:2px dotted #f0f;outline:none}.inputVal_cwjn7n[type=number]{max-width:4em}.inputVal_cwjn7n:focus{outline:2px solid #f0f;border-bottom-color:transparent}.input_cwjn7n{display:flex}.rangeInputWrap_cwjn7n{flex:2;align-items:center;display:flex;justify-content:flex-end}.rangeSlider_cwjn7n{max-width:75pt;justify-self:end;align-self:center;appearance:none;width:100%;height:2px;background:#a9a9a9;outline:none}.rangeSlider_cwjn7n::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:var(--brightBlue);cursor:pointer;transform:scale(1.2);transition-duration:.2s}.rangeSlider_cwjn7n:focus{background:#fff}.rangeSlider_cwjn7n::-webkit-slider-thumb:active{transform:scale(1);background:#5cc9f5}.rangeSlider_cwjn7n::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--brightBlue);cursor:pointer;transform:scale(1.2);transition-duration:.2s}.rangeSlider_cwjn7n::-moz-range-thumb:active{transform:scale(1);background:#5cc9f5}.customProps_cwjn7n{margin:0;padding:0;background:#222;color:#fff;font:100%/1.2 Source Code Pro,menlo,monaco,monospace;font-size:1rem;counter-reset:section}.customProps_cwjn7n li{display:grid;grid-template-columns:auto 1fr;padding:.5rem 1.25rem .5rem 3rem;position:relative}.customProps_cwjn7n li:nth-child(2n){background:#333}.customProps_cwjn7n li:first-child,.customProps_cwjn7n li:last-child{padding-left:2rem}.customProps_cwjn7n li:before{counter-increment:section;content:counters(section,".") " ";position:absolute;left:.75rem;margin-top:9px;color:#696969}.inputVal_cwjn7n{position:relative}.name_cwjn7n{margin:0}.demoContainer_cwjn7n{position:relative;display:grid;grid-template-columns:1fr 2fr;border-left:1px solid;border-right:1px solid;border-color:var(--demoBorder);border-top:1px solid;border-top-color:var(--demoBorder)}.loading_cwjn7n:before{content:"Loading...";position:absolute;font-family:var(--monoType);padding:.25rem .5rem;color:#fff;background-color:#221;z-index:2}.resourceContainer_cwjn7n{padding:2rem;position:relative;display:grid}.resourceContainer_cwjn7n p,[type=resource] h2{max-width:46ch}.note_cwjn7n{position:absolute;font-size:14px;text-align:right;top:calc(100% + 0.5rem);right:.5rem;max-width:450px;color:#696969;font-style:italic;line-height:1}@media (max-width:900px){[type=demo] .card_cwjn7n{width:calc(100% - 4rem)}}@media (max-width:800px){.customProps_cwjn7n{font-size:.9rem}}@media (max-width:700px){.demoText_cwjn7n{font-size:2rem;padding:1rem}.demoContainer_cwjn7n{grid-template-columns:1fr}.demoArea_cwjn7n{min-height:170px}.resourceContainer_cwjn7n{padding:0 1rem 1rem}}@media (max-width:500px){.customProps_cwjn7n li:first-child,.customProps_cwjn7n li:last-child{padding-left:.5rem}.customProps_cwjn7n li{padding-left:1rem}.customProps_cwjn7n li:before{content:none}.customProps_cwjn7n li{grid-template-columns:1fr}.inputVal_cwjn7n{width:100%}.rangeSlider_cwjn7n{max-width:90%}}@media (prefers-color-scheme:dark){.demoArea_cwjn7n{background:var(--cardBg)}}.author_1y7cwda{width:60px;height:60px;border-radius:50%;object-fit:cover}.date_1y7cwda{margin-left:.5rem}.date_1y7cwda:before{content:"∙";margin-right:.5rem}.meta_1y7cwda{display:grid;grid-template-columns:70px 50ch auto;margin-bottom:1rem;align-items:center}.meta_1y7cwda h2,.meta_1y7cwda p{margin:0}.meta_1y7cwda p{font-size:85%;color:#696969}.title_1y7cwda{display:flex;flex-direction:column;justify-content:center}.tags_1y7cwda{align-items:end;display:grid}.tags_1y7cwda ul{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;padding:0;margin:0}.tags_1y7cwda li{border-width:1px;border-style:solid;border-radius:3pc;padding:.5rem;line-height:1;display:grid}.tags_1y7cwda a{color:#222;font-size:9pt;text-decoration:none;text-transform:uppercase;font-weight:800;letter-spacing:.05em}.paint_1y7cwda{border-color:#eb95a4;background:#fff1ff}.props_1y7cwda{border-color:#da9a0b;background:#ffefc8}.layout_1y7cwda{border-color:#7eb8e4;background:#e0edfe}.animation_1y7cwda{border-color:#7bbf95;background:#ccebd1}.typed_1y7cwda{border-color:#c193e3;background:#f1eaff}.meta_1y7cwda{padding:2rem 0}[type=resource] .meta_1y7cwda{padding:2rem 2rem 0;grid-template-columns:70px auto auto}@media (min-width:700px){[type=resource] .meta_1y7cwda{grid-template-columns:70px 40ch auto}}.meta_1y7cwda .title_1y7cwda{line-height:1.4}@media (max-width:900px){.meta_1y7cwda{padding:2rem 2rem 0}}@media (max-width:800px){.tags_1y7cwda a{font-size:11px}.tags_1y7cwda li{padding:.25rem .5rem}.meta_1y7cwda{grid-template-columns:70px auto auto}[type=resource] .meta_1y7cwda{padding:1rem 1rem 0;margin-bottom:0}}@media (max-width:600px){.meta_1y7cwda{grid-template-columns:70px auto}.meta_1y7cwda h2{font-size:1.25rem}.tags_1y7cwda{grid-column:1/span 2}.tags_1y7cwda ul{justify-content:start;margin-top:1rem}}@media (prefers-color-scheme:dark){.meta_1y7cwda p{color:#cacbce}}