html{font-family:system-ui,sans-serif;@media (prefers-reduced-motion: no-preference){scroll-behavior:smooth}}body{padding:1rem;max-inline-size:800px;margin:auto}img{display:block}.status{border-radius:5px;margin-bottom:1em}.connected-badge{display:inline-block;position:relative;width:10px;height:10px;margin-right:10px}.connected-badge:after{width:100%;height:100%;position:absolute;content:"";border-radius:999px;background-color:#f687b3}.connected-badge:before{width:100%;height:100%;position:absolute;content:"";animation:ping 1s cubic-bezier(0,0,.2,1) infinite;border-radius:999px;background-color:#f687b3}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.blogPosts{@media (min-width: 550px){column-count:2;column-gap:1rem}}.blogPost{border:1px solid #eee;padding:1rem;border-radius:5px;margin-bottom:2rem;break-inside:avoid-column}.blogPost-title{font-weight:700;font-size:1.2em;margin:1em 0}.blogPost-title a{color:inherit;text-decoration:none}.blogPost-excerpt{font-size:.9em;color:#666;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;&>*{margin:0}}.blogPost-image{border-radius:3px;flex-shrink:0}.blogPost-author{display:flex;align-items:center;font-size:.9em;margin-top:1em;color:#666}.blogPost-author-image{border-radius:50%;margin-right:15px;width:25px}input{width:100%;padding:10px;box-sizing:border-box}.result{margin:1rem 0;border:1px solid #eee;border-radius:5px;padding:1rem;display:grid;gap:1em;pre {font-size: .8em; background-color: #fefefe; padding: 1rem; overflow: hidden; width: 100%;} details {overflow: hidden;}}.result-title{a {color: inherit;}}.result-highlights{color:#666;font-size:.8em;mark {background: yellow;}}nav{display:flex;gap:1rem;a {color: #845ef7;}}.example{border:1px solid #eee;padding:1rem;margin-block:2rem;display:grid;gap:1rem;border-radius:5px;overflow:hidden;&:before{content:attr(data-title);font-weight:700;font-size:1.3em}}