html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}:root{--dark-bg-color: rgb(29, 41, 72);--dark-primary: rgb(108, 247, 228);--dark-secondary: rgb(240, 146, 154);--dark-tertiary: rgb(246, 240, 152);--dark-text: rgb(188, 247, 228);--light-bg-color: rgb(246, 246, 246);--light-primary: rgb(0, 127, 256);--light-secondary: rgb(240, 146, 154);--light-tertiary: rgb(108, 247, 228);--light-text: rgb(53, 62, 74);--radius: 5px;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{color-scheme:light dark;color:light-dark(var(--light-text),var(--dark-text));background-color:light-dark(var(--light-bg-color),var(--dark-bg-color))}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}ul{list-style:none}.config-wrapper{width:100%;display:grid;grid-template-columns:100px auto;box-shadow:0 10px 20px #00000030,0 6px 6px #0000003b;z-index:2}.config-wrapper ul{width:100%;display:flex;gap:20px;flex-wrap:wrap}.config-wrapper ul li{display:inline-block;min-width:calc(33vw - 124px);border-radius:5px;border:2px solid black}.config-wrapper ul li.even{min-width:calc(49vw - 124px)}#frames{z-index:1;display:flex;flex-wrap:wrap;height:100vh}#frames>*{flex:auto;min-width:calc(33vw - 4px);border:2px solid light-dark(var(--light-tertiary),var(--dark-tertiary))}#frames>.even{min-width:calc(49vw - 4px)}#frames>div>iframe{width:100%;height:100%}input{border-radius:var(--radius);padding:10px 5px;background-color:light-dark(var(--light-bg-color),var(--dark-bg-color));border:1px solid light-dark(var(--light-primary),var(--light-primary))}button{border-radius:var(--radius);padding:10px 5px;background-color:light-dark(var(--light-primary),var(--dark-primary));color:light-dark(var(--light-bg-color),var(--dark-bg-color));border:none}button.secondary{background-color:light-dark(var(--light-secondary),var(--dark-secondary))}.input-group{display:grid;grid-template-columns:auto 50px 50px;padding:5px;box-shadow:0 10px 20px #00000030,0 6px 6px #0000003b}.input-group>input{border-radius:var(--radius) 0 0 var(--radius)}.input-group>button:first-of-type{border-radius:0}.input-group>button:last-of-type{border-radius:0 var(--radius) var(--radius) 0}.card{box-shadow:0 10px 20px #00000030,0 6px 6px #0000003b}#example{width:100vw;height:100vh;text-align:center;display:flex;align-items:center;justify-content:space-around}#example p{font-weight:700;font-size:100px;whiteSpace:pre-wrap}.animate-character{text-transform:uppercase;background-image:linear-gradient(-225deg,#231557,#44107a 29%,#ff1361 67%,#fff800);background-size:auto auto;background-clip:border-box;background-size:200% auto;color:#fff;background-clip:text;text-fill-color:transparent;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:textclip 2s linear infinite;display:inline-block}@keyframes textclip{to{background-position:200% center}}
