:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.5;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;-webkit-font-smoothing:antialiased;hyphens:auto;overflow-wrap:break-word}#intro{padding:15px 20px}#side-by-side{display:flex;flex-flow:row nowrap}#side-by-side>:first-child{border-right:1px solid rgba(255,255,255,.2)}main,iframe{flex:1 1 0px;min-width:0}iframe{border:none}h1,h2,p{margin:10px 0;max-width:650px}h1{font-size:1.5em}h2{font-size:1.2em;text-align:center}code{font-family:Courier,Menlo,monospace;font-size:1em;padding:.1em .3em;border-radius:3px;background-color:#fff3}article:not(#history){display:grid;grid-template-columns:repeat(auto-fill,100px);justify-content:space-evenly;gap:10px;margin:10px}article:not(#history) section{display:flex;flex-flow:column nowrap;gap:5px;align-items:center;width:100px}article:not(#history) code{font-size:10px;overflow:hidden;text-align:right;text-overflow:ellipsis;white-space:nowrap;max-width:100%}#history{display:flex;flex-flow:row wrap;min-height:350px;align-items:center;justify-content:space-evenly;background-color:#2e2e2e;canvas{width:100%;max-width:350px}}#clones{position:relative;display:block;aspect-ratio:1;width:100%;---clone-count: 1;---clone-width: 50%;---clone-offset: calc(var(---clone-width) / var(---clone-count))}#clones .clone{position:absolute;right:calc(var(---clone-index) * var(---clone-offset));top:calc(var(---clone-index) * var(---clone-offset));aspect-ratio:3 / 2;box-sizing:border-box;max-width:350px;width:var(---clone-width);border:1px solid red;transform:perspective(1000px) rotateY(-25deg);transition:.5s ease;transition-property:background-color,opacity,transform}#clones code{position:absolute;inset:5px auto auto 5px;opacity:.5;font-size:11px;transition:.5s ease opacity}#clones canvas{width:100%}#clones:has(.clone:hover) #clones .clone:not(:hover){opacity:.15;background-color:transparent}#clones .clone:hover{opacity:1;background-color:#2e2e2e;transform:perspective(1000px) rotateY(0)}#clones .clone:hover code{opacity:1}
/*# sourceMappingURL=example.css.map */