.demo-container{--vert-gap:0px;overflow:hidden;width:1600px;max-width:100%;margin:var(--vert-gap) auto}.demo-content{overflow-y:auto;overflow-x:auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;flex-direction:column;gap:20px;width:100%;height:calc(100vh - var(--header-height, 0px) - var(--vert-gap)*2);min-height:640px;padding:20px;background:var(--color-gray);border:1px solid #ccc}@media(max-width:480px){.demo-content{min-height:800px}}.demo-error{text-align:center}.demo-error button{margin-top:10px;padding:10px 16px;font-size:20px}.demo-params{z-index:1000;position:absolute;left:0;bottom:0;width:100%;will-change:transform;transition:transform .3s;transform:translateY(100%)}.demo-params:before{content:"";position:absolute;inset:0;box-shadow:2px -3px 3px rgba(0,0,0,.1);opacity:0;transition:opacity .3s;will-change:opacity}.demo-params.s--visible{transform:translateY(0)}.demo-params.s--visible:before{opacity:1}.demo-params__inner{overflow-y:auto;overflow-x:hidden;height:100%;max-height:200px;padding:20px;border:2px solid rgba(0,0,0,.2);background:#fff}.demo-params__content{display:flex;justify-content:center;align-items:center;gap:20px;width:1000px;max-width:100%;margin:0 auto}.demo-params__inputs{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.demo-params__inputs label p{margin-bottom:4px;font-size:14px}.demo-params__inputs input{width:100%;padding:10px;border:1px solid #ccc;font-size:16px}.demo-params__submit{flex-shrink:0;padding:10px 16px;font-size:20px;cursor:pointer}.demo-params__toggle{position:absolute;bottom:100%;right:30px;padding:8px 16px;font-size:20px;background:#fff;cursor:pointer}.demo-callout{z-index:100;position:absolute;left:0;bottom:20px;width:100%;text-align:center}.styles_heading__fV0xK{margin:20px auto;text-align:center}.styles_demos__FMHi3{--demo-width:360px;--demos-per-row:3;display:flex;flex-wrap:wrap;column-gap:calc((var(--container-width) - var(--demo-width)*var(--demos-per-row))/(var(--demos-per-row) - 1));row-gap:20px;padding-bottom:40px}.styles_demo__f_NKA{width:var(--demo-width);max-width:100%}.styles_demoPreview__A9MJE{--border-width:4px;padding-bottom:66.6666666667%}.styles_demoPreviewContent__LOz35{position:absolute;inset:0;padding:var(--border-width)}.styles_demoPreviewContent__LOz35>*{width:100%;height:100%;object-fit:cover}.styles_demoTitle__kF_lO{display:inline-block;background:linear-gradient(90deg,#ff4800,#8d00ff);-webkit-background-clip:text;background-clip:text;color:transparent}.styles_demoTags__swqUZ{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.styles_demoTag__zGvB4{padding:4px 8px;text-transform:uppercase;background:var(--color-gray);line-height:1}.twitter-x{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background:#fff}.twitter-x__center{width:var(--logo-size);height:var(--logo-size)}@keyframes shaking{0%{transform:translate(-1px,-5px)}2%{transform:translate(3px,-8px)}4%{transform:translate(-7px,-3px)}6%{transform:translate(-2px,3px)}8%{transform:translate(-1px,-8px)}10%{transform:translate(-2px,-9px)}12%{transform:translate(10px,10px)}14%{transform:translate(3px,-4px)}16%{transform:translateY(-9px)}18%{transform:translate(-4px,10px)}20%{transform:translate(-4px,3px)}22%{transform:translate(-1px,-8px)}24%{transform:translate(-5px,8px)}26%{transform:translate(-5px,-9px)}28%{transform:translate(7px,-5px)}30%{transform:translate(-2px,3px)}32%{transform:translate(-3px,7px)}34%{transform:translate(-1px,-7px)}36%{transform:translate(4px,3px)}38%{transform:translate(-2px,-8px)}40%{transform:translate(-4px,-4px)}42%{transform:translate(9px,10px)}44%{transform:translate(-3px,-3px)}46%{transform:translate(-4px,5px)}48%{transform:translate(5px,6px)}50%{transform:translate(10px,2px)}52%{transform:translate(2px,9px)}54%{transform:translate(10px)}56%{transform:translate(5px,-9px)}58%{transform:translate(-2px,-9px)}60%{transform:translate(5px,8px)}62%{transform:translate(-3px,-8px)}64%{transform:translate(6px,-4px)}66%{transform:translate(5px,8px)}68%{transform:translate(9px,-7px)}70%{transform:translate(7px,10px)}72%{transform:translate(2px,7px)}74%{transform:translate(10px,-4px)}76%{transform:translate(-2px,6px)}78%{transform:translate(7px,-9px)}80%{transform:translate(9px,-7px)}82%{transform:translate(10px,3px)}84%{transform:translate(-8px,3px)}86%{transform:translate(-1px,3px)}88%{transform:translate(-2px,-9px)}90%{transform:translate(5px,-5px)}92%{transform:translate(9px,-5px)}94%{transform:translate(-9px,-3px)}96%{transform:translate(-6px,-6px)}98%{transform:translate(-4px,-9px)}to{transform:translate(-8px,4px)}}.twitter-x__logo{z-index:2;position:absolute;inset:0}.twitter-x.s--morphing .twitter-x__logo{animation:shaking var(--twitter-shaking-at) var(--twitter-shaking-delay)}.twitter-x__logo-svg{overflow:visible;stroke:var(--color-twitter);fill:var(--color-twitter);will-change:stroke,fill}.twitter-x.s--morphing .twitter-x__logo-svg{transition:stroke var(--logo-morphing-at) var(--logo-morphing-delay),fill var(--logo-fill-at) var(--logo-fill-delay);fill:transparent;stroke:#fff}.twitter-x__logo-svg2{overflow:visible;position:absolute;inset:0;fill:#fff}.twitter-x__logo-svg2 path{transform:scale(0)}.twitter-x__logo-svg2 path:first-child{transform-origin:100px 160px}.twitter-x__logo-svg2 path:last-child{transform-origin:160px 100px}.twitter-x.s--morphing .twitter-x__logo-svg2 path{transition:transform var(--x-part-2-at) var(--x-part-2-delay) cubic-bezier(.13,.9,.3,1.3);transform:scale(1)}.twitter-x__sweat{--timing:var(--twitter-reaction-at) var(--twitter-reaction-delay);position:absolute;right:60px;top:55px;display:flex;flex-wrap:wrap;justify-content:center;width:60px;gap:4px;color:#fff;transform:translateY(-10px);opacity:0;will-change:opacity,transform}.twitter-x.s--morphing .twitter-x__sweat{transition:opacity var(--timing),transform var(--timing);transform:translateY(0);opacity:1}.twitter-x__sweat svg{will-change:opacity}.twitter-x.s--morphing .twitter-x__sweat svg{transition:opacity var(--logo-fill-at) var(--logo-fill-delay);opacity:0}.twitter-x__elon{position:absolute;left:calc(100% + 20px);top:50%;width:300px;transform:translateY(-50%);opacity:0;will-change:opacity}@media(max-width:1100px){.twitter-x__elon{width:240px}}@media(max-width:800px){.twitter-x__elon{left:50%;top:auto;bottom:100%;width:200px;transform:translate(-100px)}}.twitter-x.s--morphing .twitter-x__elon{transition:opacity var(--elon-appearance-at) var(--elon-appearance-delay);opacity:1}.twitter-x__black-bg{position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;margin-left:-75vmax;margin-top:-75vmax;border-radius:50%;background:#000;transform:scale(0);will-change:transform}.twitter-x.s--morphing .twitter-x__black-bg{transition:transform var(--logo-morphing-at) var(--logo-morphing-delay);transform:scale(1)}.twitter-x__doge{position:absolute;left:calc(100% + 5px);bottom:calc(100% + 15px);width:40px;transform:scale(0)}.twitter-x.s--morphing .twitter-x__doge{transition:transform var(--doge-appearance-at) var(--doge-appearance-delay) cubic-bezier(.13,.9,.4,1.6);transform:scale(1)}.twitter-x__reset{position:absolute;left:50%;top:calc(100% + 40px);width:36px;height:36px;margin-left:-18px;stroke:#fff;transform:scale(0);pointer-events:none;cursor:pointer}.twitter-x.s--morphing .twitter-x__reset{transition:transform var(--reset-appearance-at) var(--reset-appearance-delay) cubic-bezier(.13,.9,.4,1.6);transform:scale(1);pointer-events:auto}