.code-block{& pre{margin:0}margin-bottom:1rem}.code-block-example-result{color:var(--pico-color);background:#232b3d;background-color:var(--pico-background-color);margin-bottom:2rem;padding:1rem;& button{margin:0 .5rem .5rem 0}}.highlight{color:var(--elemen-ts-logo-color-accent)}.search-with-suggestions-example{& input.odd{color:var(--elemen-ts-logo-color-accent)}}.list-wrapper{margin-top:4rem}.todo-list{margin-bottom:4rem;& li{cursor:pointer;gap:.5rem;margin-bottom:1rem;line-height:1.5;list-style-type:none;display:flex;&:hover{text-decoration:underline}}&.completed{color:green}}:root{--elemen-ts-logo-color-base:#000;--elemen-ts-logo-color-accent:#01afa7}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--elemen-ts-logo-color-base:#fff;--elemen-ts-logo-color-accent:#4fcab0}}:root[data-theme=dark]{--elemen-ts-logo-color-base:#fff;--elemen-ts-logo-color-accent:#4fcab0}header{z-index:100;background-color:var(--pico-background-color);position:sticky;top:0}nav ul{flex-wrap:wrap;align-items:start;display:flex}nav ul li{padding:.4rem}h2,.hero{scroll-margin-top:110px}.path-base{fill:var(--elemen-ts-logo-color-base)}.path-accent{fill:var(--elemen-ts-logo-color-accent)}.plate{transform-box:fill-box;transform-origin:50%;transition:transform .5s}svg.elemen-ts-logo{max-width:540px}svg:hover .plate{transform:rotate(10deg)scale(.8)}ul{text-align:left}.elemen-ts-logo{--ets-shoot-down-duration:.15s;--ets-wiggle-duration:.3s;--ets-brackets-shake-duration:.1s;&.initial{& .dash{transform:translate(70%,-100%)}}&.animate{& .brackets-move{transform-box:fill-box;animation-delay:var(--ets-shoot-down-duration);animation-name:brackets-shake;animation-duration:var(--ets-brackets-shake-duration);animation-timing-function:ease-in}& .dash{transform-origin:bottom;animation-name:shoot-down,wiggle;animation-duration:var(--ets-shoot-down-duration), var(--ets-wiggle-duration);animation-delay:0s, var(--ets-shoot-down-duration);transform-box:fill-box;border:1px solid var(--elemen-ts-logo-color-accent);animation-timing-function:linear,cubic-bezier(.24,1.53,.8,.6);animation-iteration-count:1,1;animation-direction:normal,alternate}}}@keyframes brackets-shake{50%{transform:translateY(10%)}}@keyframes shoot-down{0%{transform:translate(70%,-100%)}}@keyframes wiggle{0%,to{transform:rotate(0)}10%{transform:rotate(7deg)}20%{transform:rotate(-7deg)}30%{transform:rotate(5deg)}40%{transform:rotate(-5deg)}50%{transform:rotate(3deg)}60%{transform:rotate(-3deg)}70%{transform:rotate(2deg)}80%{transform:rotate(-2deg)}90%{transform:rotate(1deg)}}
