.explainer[data-astro-cid-iknr73g3]{display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;gap:2rem;margin-bottom:2em}.explainer[data-astro-cid-iknr73g3].wide{gap:1rem;margin-left:-7rem;margin-right:-7rem;.example{width:calc(33% - .75rem)}}@media only screen and (max-width:768px){.explainer[data-astro-cid-iknr73g3]{gap:1.5rem;margin-bottom:1.5em}.explainer[data-astro-cid-iknr73g3].wide{margin-left:auto;margin-right:auto;.example{width:100%}}}@media only screen and (max-width:480px){.explainer[data-astro-cid-iknr73g3]{gap:1rem;margin-bottom:1em}}.example{width:calc(50% - 1rem);min-width:calc(23rem,100%);max-width:28rem;display:flex;flex-shrink:0;position:relative;flex-direction:column;&.caption-right-of{flex-direction:row;gap:1rem;.caption{font-size:var(--font-size-base)}}&.full-width{width:100%;min-width:none;max-width:none}.side-icon{position:absolute;top:-.75rem;left:-.75rem;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;border-radius:1rem;z-index:2;box-shadow:0 0 0 4px var(--color-gray-11);line-height:1;.icon{color:var(--color-gray-11);stroke-width:1px;stroke:var(--color-gray-11)}}&:has(.bad-side-icon) .demo{border-color:var(--color-pink-3);box-shadow:0 0 0 3px var(--color-pink-5)}.caption{padding:1rem .5rem;font-size:var(--font-size-medium)}.side-icon.bad-side-icon{background:var(--color-pink-1)}.side-icon.good-side-icon{background:var(--color-green-1)}&:has(.good-side-icon) .demo{border-color:var(--color-green-1);box-shadow:0 0 0 3px var(--color-green-5)}&.has-side .demo{border-top-left-radius:0}.demo{font-size:.875rem;height:29rem;width:100%;margin:0;box-shadow:none;border:2px solid var(--color-gray-6);&:after{background:none}&:before{position:absolute;top:0;left:0;right:0;content:"";background:linear-gradient(white,transparent);height:1.25rem;width:100%;z-index:1;pointer-events:none;border-radius:1rem 1rem 0 0}.checkbox,.radio{display:flex;flex-shrink:0;align-items:center;justify-content:center;margin-top:calc(.125rem + 1px);border-radius:.125rem;width:1rem;height:1rem;border:2px solid var(--color-gray-6)}.checkbox.checked{border-color:var(--color-blue-2);background:var(--color-blue-2);.icon{color:var(--color-gray-11)}}.radio{position:relative;border-radius:.5rem}.radio.checked{border-color:var(--color-blue-2)}.radio.checked:after{position:absolute;top:2px;left:2px;content:" ";background:var(--color-blue-2);width:.5rem;height:.5rem;border-radius:.25rem}.log,.interaction,.chat-bubble_row .chat-bubble.chat-bubble_right,.chat-bubble_row .chat-bubble.chat-bubble_left{background:var(--color-gray-11);box-shadow:none}.chat-bubble_row .chat-bubble.chat-bubble_right,.chat-bubble_row .chat-bubble.chat-bubble_left{border-width:2px}.chat-bubble_row .chat-bubble.chat-bubble_left{font-weight:400;display:inline-block;background:var(--color-gray-8);strong{color:var(--color-gray-0);background:none;background-clip:none;-webkit-text-fill-color:var(--color-gray-0)}}.chat-bubble_row .avatar{background:var(--color-gray-8);box-shadow:none;border-width:2px}.interaction{background:var(--color-gray-9);border-top:2px solid var(--color-gray-6)}.text-field{border-width:2px;border-right:0;box-shadow:none;border-color:var(--color-gray-6)}.button.emphasized{cursor:default;background:var(--color-gray-4)}.button:hover{background:var(--color-gray-4)}.button:active{transform:none}.entry{display:flex;flex-direction:column;gap:.5rem;transform:translateY(0);transition:none;will-change:transform}.tile{border-width:2px}.entry:first-child:not(:has(.tile.selected)){@starting-style{transform:none!important}}}}@media only screen and (max-width:768px){.example{width:100%;margin:0 2rem;&.caption-right-of{flex-direction:column}.demo{font-size:var(--font-size-medium)}.caption{padding:.875rem .25rem}}article .example.good-example{margin:0 auto;width:100%;max-width:28rem;.demo{width:auto}}}@media only screen and (max-width:480px){.example{.demo{font-size:.75rem}.caption{padding:.75rem 0}.side-icon{width:1.25rem;height:1.25rem;top:-.625rem;left:-.625rem;box-shadow:0 0 0 3px var(--color-gray-11);.icon{width:.875rem;height:.875rem}}}}