@layer theme,base,components,utilities;@layer components{.example{margin-inline:0;overflow:hidden;border:var(--hairline) solid var(--line);border-radius:var(--radius);background:var(--bg)}.example__live{padding:var(--space-6)}@media(max-width:40rem){.example__live{padding:var(--space-4)}}.example__source{position:relative;border-top:var(--hairline) solid var(--line);background:var(--code-bg)}.example__source .code-block{border:0;border-radius:0}.example__source[data-collapsed] .code-block__body{max-height:calc(var(--example-lines, 28) * var(--text-1) * var(--leading-code) + var(--space-4));overflow:hidden;mask-image:linear-gradient(to bottom,#000 72%,transparent)}.example__expand{display:block;width:100%;height:36px;border-top:var(--hairline) solid var(--line);color:var(--fg-3);font-size:var(--text-1);transition:background-color var(--duration-1) var(--ease-out),color var(--duration-1) var(--ease-out)}.example__expand:hover{background:var(--bg-hover);color:var(--fg)}.example__expand:focus-visible{outline-offset:-2px}.example__caption{padding:var(--space-2) var(--space-4);border-top:var(--hairline) solid var(--line);color:var(--fg-4);font-size:var(--text-1)}.example__error{margin:0;color:var(--fg-3);font-size:var(--text-1)}.example-demo__label{margin:0 0 var(--space-4);color:var(--fg-4);font-family:var(--font-mono);font-size:12px}}