.transitions-demo pre{height:245px;margin-top:1em}.transitions-demo svg{height:26px;width:26px}body{background-color:#efefef;--w:672px;--gap:20px}.dark body{background-color:#000}pre{outline:1px solid;outline-color:#ddd;margin:0 -1em;padding:1em;--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.dark pre{outline-color:#333}main{transition:transform .4s ease-in-out}.show-code main{--dx:calc((var(--w) + var(--gap)) / -2);--mx:calc((100vw - var(--w) - var(--gap) - var(--gap)) / -2);transform:translateX(max(var(--mx),var(--dx)))}.source{transition:transform .5s ease,opacity .5s ease;opacity:0;transform:translateX(calc(var(--w) + var(--gap)));display:none}.show-source .source{opacity:1;display:block}.button-hide{display:none}.show-source .button-hide{display:block}.show-source .button-show{display:none}.ch-selected{background:var(--ch-t-editor-selectionBackground);border-radius:2px;line-height:1.4}