/*! MetaCSS base v0.17.0 - generated by thi.ng/meta-css @ 2025-06-26T11:25:56.857Z */@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes spin{0%{rotate:0}to{rotate:1turn}}@keyframes shrink{0%{height:var(--mcss-shrink-size)}to{height:0}}:root{font-size:16px}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}fieldset{padding:.35em .75em .625em}legend{display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]::-webkit-search-decoration{-webkit-appearance:none}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}html,fieldset,legend,input,textarea,[type=checkbox],[type=date],[type=datetime-local],[type=file],[type=radio],[type=search]{box-sizing:border-box;-webkit-box-sizing:border-box}*,:before,:after{box-sizing:inherit}html,body{min-height:100%}img{max-width:100%;height:auto}blockquote:first-child,caption:first-child,cite:first-child,dd:first-child,dl:first-child,dt:first-child,fieldset:first-child,figcaption:first-child,h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child,hr:first-child,input:first-child,label:first-child,legend:first-child,ol:first-child,ol li:first-child,p:first-child,progress:first-child,table:first-child,textarea:first-child,ul:first-child,ul li:first-child{margin-top:0}blockquote:last-child,caption:last-child,cite:last-child,dd:last-child,dl:last-child,dt:last-child,fieldset:last-child,figcaption:last-child,h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child,hr:last-child,input:last-child,label:last-child,legend:last-child,ol:last-child,ol li:last-child,p:last-child,progress:last-child,table:last-child,textarea:last-child,ul:last-child,ul li:last-child{margin-bottom:0}@keyframes drawer-up{0%{top:0}to{top:var(--drawer-height)}}@keyframes drawer-down{0%{top:var(--drawer-height)}to{top:0}}:root{--text-color:#000;--bg-color:#fffe;--control-bg-color:#fff2;--hover-bg-color:#eee;--hover-color:#fbff4f;--border-color:#666;--drawer-bg-color:var(--bg-color);--toggle-color-off:var(--border-color);--toggle-color-on:var(--hover-color);--toggle-border-color:var(--border-color);--toggle-bg-color:var(--bg-color);--fuzzy-dropdown-bg-color:var(--bg-color);--fuzzy-dropdown-color:var(--text-color);--fuzzy-dropdown-hover-bg-color:var(--bg-color);--fuzzy-dropdown-hover-color:var(--hover-color)}body{margin:0rem;height:100vh;font-family:sans-serif;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABlBMVEUpKCtCQkIqxfVeAAAADklEQVR42mNAA4wjnA8ACZAAEWMfKR0AAAAASUVORK5CYII);overflow:hidden}iframe{margin:0rem;padding:0rem;border-style:solid;border-width:0rem;position:fixed;transform-origin:center}h1 small{display:block;font-size:.875rem;font-weight:400;opacity:.6}a:link,a:visited{color:var(--text-color);font-weight:700;text-decoration:none}a:hover{color:var(--hover-color)}i{display:inline-block;vertical-align:middle;margin-right:.5rem}i svg{fill:currentcolor}.drawer main{margin:0rem;padding:1rem;color:var(--text-color);background-color:var(--drawer-bg-color)}.wrapper{max-width:100%;margin-left:auto;margin-right:auto}.editor{display:grid;gap:1rem;grid-template-columns:8rem 1fr}.variations{display:grid;grid-template-columns:8rem 1fr;gap:1rem}.variations .grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem}.variations .variation{width:100%;height:5rem;padding:.5rem;background-color:var(--control-bg-color);color:var(--text-color);border-color:var(--border-color);border-style:solid;border-width:1px}.variations .variation .title{display:block;width:100%;font-size:1.5rem;margin-bottom:.5rem}.content{max-height:82vh;overflow-y:scroll}.drawer.ios .content{max-height:75vh}label{display:block;margin-bottom:1rem;font-weight:700}label .desc{display:block;font-size:.875rem;font-weight:400;opacity:.6}input,select{width:100%;height:2rem;padding-left:.5rem;padding-right:.5rem;opacity:.8;cursor:pointer}input:hover,input:focus,select:hover,select:focus{opacity:1}.controls .control{gap:1rem;margin-bottom:1rem;padding:1rem;background-color:var(--control-bg-color);border-color:var(--border-color);border-style:solid;border-width:1px}.controls .control-inner{display:grid;grid-template-columns:1fr 2rem;gap:.5rem}.controls .opicon{display:block;height:2rem;padding:.5rem}.controls .anon{margin-bottom:1rem}.controls .value{font-size:.875rem}.controls input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:3px;padding:0rem;background:linear-gradient(90deg,var(--hover-color) var(--value),var(--border-color) var(--value));cursor:pointer}.controls input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;background-color:var(--hover-color);border-style:solid;border-width:0rem}.controls input[type=range]::-moz-range-thumb{width:12px;height:12px;background-color:var(--hover-color);border-style:solid;border-width:0rem;border-radius:0rem}.controls input[type=text]:invalid{background-color:#ff4136;border-style:solid;border-width:.125rem}.controls input[readonly]{background-color:#eee;color:#777}.resolution .control{background-color:var(--control-bg-color)}.resolution label{display:inline-block;margin-bottom:1rem}.resolution select{width:100%;height:2rem;padding-left:.5rem;padding-right:.5rem;cursor:pointer}.res-small{margin-top:1rem}.res-xl{display:none}.cpu-metrics{margin-top:1rem}button{width:100%;padding:1rem;text-align:left;border-style:solid;border-width:0rem;margin-top:0rem;margin-bottom:0rem;background-color:transparent;color:var(--text-color);border-color:var(--border-color);border-bottom-style:solid;border-bottom-width:1px}button:hover,button:focus{color:var(--hover-color)}button:disabled{color:#777}input[type=color]{width:0rem;height:0rem;opacity:0}label.picker{position:relative;margin-bottom:2rem}.swatch{display:block;position:absolute;width:100%;height:2rem;top:0rem;box-shadow:inset 0 0 4px #000a;opacity:.8}.swatch:hover{opacity:1}.drawer{position:fixed;top:0rem;left:0rem;z-index:9999;width:100vw}.drawer .drawer-toggle{width:100%;display:block;height:2rem;text-align:center}.drawer .drawer-toggle i{display:inline-block;width:4rem;background-color:var(--drawer-bg-color);border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem}.drawer.hide{animation:drawer-up 1ms forwards}.drawer.hide .drawer-toggle svg{transform:rotate(180deg)}.fuzzy-dropdown{position:relative}.fuzzy-dropdown .options{position:absolute;top:2rem;z-index:1;width:100%}.fuzzy-dropdown .option{width:100%;height:2rem;padding:.5rem;background-color:var(--fuzzy-dropdown-bg-color);color:var(--fuzzy-dropdown-color)}.fuzzy-dropdown .option:hover,.fuzzy-dropdown .option:focus{background-color:var(--fuzzy-dropdown-hover-bg-color);color:var(--fuzzy-dropdown-hover-color)}label.toggle{display:inline-block;margin-bottom:0rem}input[type=checkbox]{width:0rem;height:0rem;opacity:0}input[type=checkbox]+.lever{position:relative;display:inline-block;cursor:pointer;background-color:var(--toggle-bg-color);opacity:.8;width:2rem;height:1rem;border-color:var(--toggle-border-color);border-style:solid;border-width:1px;box-shadow:inset 0 0 2px #000a}input[type=checkbox]+.lever:hover{opacity:1}input[type=checkbox]+.lever:after{position:absolute;display:inline-block;content:"";background-color:var(--toggle-color-off);width:calc(1rem - 4px);height:calc(1rem - 4px);left:1px;top:1px}input[type=checkbox]:checked+.lever:after{left:1rem;background-color:var(--toggle-color-on)}@media (prefers-color-scheme:dark){:root{--text-color:#fff;--bg-color:#000d;--control-bg-color:#0002;--hover-bg-color:#222}}@media (min-width:768px){.wrapper{max-width:100%}.variations .grid{grid-template-columns:repeat(5,1fr)}.content{max-height:85vh}label{margin-bottom:0rem}.controls .control{display:grid;grid-template-columns:1fr 1fr}}@media (min-width:1024px){.wrapper{max-width:90%}.editor{grid-template-columns:12rem 1fr 12rem}.variations .grid{grid-template-columns:repeat(6,1fr)}.content{max-height:90vh}.res-small{display:none}.res-xl{display:block}}@media (not (prefers-reduced-motion)){.drawer .drawer-toggle svg{transition:transform .35s ease-in-out}.drawer.hide{animation:drawer-up .25s ease-out forwards}.drawer.show{animation:drawer-down .35s ease-out forwards}}