.c-preview[data-astro-cid-yxisjogg]{display:flex;grid-area:preview;margin-block-start:20px;padding:32px;place-content:center;place-items:center;background-color:var(--background);box-shadow:var(--gray-3) 0 0 0 8px inset;color:var(--foreground);+pre[data-astro-cid-yxisjogg]{margin-block-start:0}}pre[data-astro-cid-yxisjogg]{display:grid;font:100%/1.5 Menlo,monospace;>[data-astro-cid-yxisjogg]{grid-area:1 / 1 / -1 / -1}}[data-astro-cid-yxisjogg][data-code]{display:block;overflow:auto hidden;padding:16px;font-size:14px;line-height:20px;background-color:var(--gray-2);border-radius:2px;box-shadow:var(--gray-11) 0 0 1px inset;color:var(--gray-12);&[data-lang=css]{&::highlight(rule){color:var(--tomato-11)}&::highlight(string){color:var(--grass-11)}}&[data-lang=js],&[data-lang=jsx],&[data-lang=ts],&[data-lang=tsx]{&::highlight(keyword){color:var(--tomato-11)}&::highlight(literal-property){color:var(--blue-11)}&::highlight(string),&::highlight(attr-value){color:var(--grass-11)}&::highlight(tag),&::highlight(attr-name){color:var(--blue-11)}}&[data-lang=sh]{&::highlight(function){color:var(--blue-12)}}}button[data-astro-cid-yxisjogg]{align-self:start;justify-self:end;margin-block-start:10px;margin-inline-end:8px;padding:8px;border-radius:2px;&:hover,&:focus-visible{background-color:var(--gray-4)}&:focus-visible,&:active{outline:var(--gray-11) solid 1px;outline-offset:1px}&:active{background-color:var(--gray-3)}}