.oc-example-tabs{flex-wrap:wrap;gap:.5rem;margin-top:2rem;display:flex}.oc-example-tabs button{border:1px solid var(--border);background:var(--card,#fff);color:inherit;font:inherit;cursor:pointer;border-radius:999px;align-items:center;gap:.5rem;padding:.3rem .75rem .3rem .3rem;font-size:.8125rem;font-weight:600;display:inline-flex}.oc-example-tabs button img{object-fit:cover;object-position:top;border-radius:999px;width:1.75rem;height:1.75rem}.oc-example-tabs button[aria-selected=true]{border-color:color-mix(in oklab, var(--brand) 70%, transparent);background:color-mix(in oklab, var(--brand) 8%, var(--card,#fff))}.oc-example{gap:1.25rem;margin-top:1.5rem;display:grid}@media (width>=900px){.oc-example{grid-template-columns:minmax(0,.42fr) minmax(0,1fr);align-items:start}}.oc-example figure{margin:0}.oc-example img{border:1px solid var(--border);background:var(--muted,#f5f5f4);border-radius:1rem;width:100%;display:block}.oc-example-char img{aspect-ratio:3/4;object-fit:cover}.oc-example-sheet img{aspect-ratio:16/9;object-fit:cover}.oc-example figcaption{color:var(--muted-foreground);margin-top:.5rem;font-size:.8125rem}.oc-example-side{gap:1rem;display:grid}.oc-example-canons ul{gap:.4rem;margin:.5rem 0 0;padding-left:1.1rem;font-size:.9375rem;line-height:1.5;display:grid}#examples,.oc-example-tabs button{scroll-margin-top:6rem}