@layer components{.mockup-code{--_bg:oklch(21% .006 286);--_fg:oklch(94% 0 0);--_dim:oklch(68% .01 286);--_success:oklch(80% .16 150);--_warning:oklch(84% .15 80);--_info:oklch(76% .13 245);--_destructive:oklch(72% .18 25);--_px:1.25rem;box-sizing:border-box;border-radius:var(--radius-xl);background:var(--_bg);min-width:0;max-width:100%;color:var(--_fg);font-family:var(--font-mono);font-variant-ligatures:none;text-align:start;overscroll-behavior-x:contain;direction:ltr;unicode-bidi:isolate;grid-template-columns:minmax(100%,max-content);padding-block:1.25rem 1rem;font-size:.875rem;line-height:1.7;display:grid;position:relative;overflow-x:auto;&:before{content:"";width:.75rem;height:.75rem;color:var(--_dim);opacity:.45;background:currentColor;border-radius:9999px;margin-block-end:1rem;margin-inline-start:var(--_px);display:block;box-shadow:1.25rem 0,2.5rem 0}&[data-chrome=mac]:before{opacity:1;background:oklch(68% .2 25);box-shadow:1.25rem 0 oklch(82% .16 85),2.5rem 0 oklch(74% .17 145)}&[data-chrome=none]{padding-block-start:1rem}&[data-chrome=none]:before{display:none}&[data-title]:not([data-chrome=none]):after{content:attr(data-title);font-family:var(--font-sans);text-align:center;color:var(--_dim);text-overflow:ellipsis;white-space:nowrap;pointer-events:none;font-size:.75rem;line-height:1.25rem;position:absolute;inset-block-start:.75rem;inset-inline:4.5rem;overflow:hidden}&>pre{box-sizing:border-box;padding:0 var(--_px);color:inherit;font:inherit;white-space:pre;background:0 0;border:0;border-radius:0;margin:0}&>pre>code{color:inherit;font:inherit;background:0 0;border:0;padding:0}&>pre[data-prefix]:before,&[data-numbers]>pre:before{text-align:end;width:2ch;color:var(--_dim);user-select:none;margin-inline-end:1.25ch;display:inline-block}&>pre[data-prefix]:before{content:attr(data-prefix)}&[data-numbers]{counter-reset:mockup-line}&[data-numbers]>pre{counter-increment:mockup-line}&[data-numbers]>pre:not([data-prefix]):before{content:counter(mockup-line)}&>pre[data-tone]{color:var(--_tone)}&>pre[data-tone=success]{--_tone:var(--_success)}&>pre[data-tone=warning]{--_tone:var(--_warning)}&>pre[data-tone=info]{--_tone:var(--_info)}&>pre[data-tone=destructive]{--_tone:var(--_destructive)}&>pre[data-tone=muted]{--_tone:var(--_dim)}&>pre[data-highlight]{background:color-mix(in oklch, var(--_tone,var(--_fg)) 16%, transparent)}&>pre[data-highlight=solid]{background:var(--_tone,var(--_fg));color:var(--_bg);&:before{color:inherit;opacity:.7}}&:where(:has(>pre[data-diff]))>pre>code:before{content:"";user-select:none;width:2ch;display:inline-block}&>pre[data-diff=add]{--_tone:var(--_success)}&>pre[data-diff=remove]{--_tone:var(--_destructive)}&>pre[data-diff]{color:var(--_tone);background:color-mix(in oklch, var(--_tone) 14%, transparent)}&>pre[data-diff=add]>code:before{content:"+"}&>pre[data-diff=remove]>code:before{content:"-"}&>pre>code :is(ins,del){color:inherit;border-radius:.2em;text-decoration:none}&>pre>code ins{background:color-mix(in oklch, var(--_success) 32%, transparent)}&>pre>code del{background:color-mix(in oklch, var(--_destructive) 32%, transparent);text-decoration:line-through}&:is([data-strike],[data-animate])>pre[data-diff=remove]{opacity:.8;&>code{text-decoration:line-through;text-decoration-color:color-mix(in oklch, var(--_tone) 70%, transparent)}}&[data-animate]>pre{--_stagger:var(--mockup-code-stagger,.14s);--_delay:calc(var(--mockup-code-delay,.3s) + var(--_i,0) * var(--_stagger))}&[data-animate]>pre[data-diff=remove]{animation:mockup-code-remove .45s ease-out var(--_delay) both;&>code{animation:mockup-code-strike .45s ease-out var(--_delay) both}}&[data-animate]>pre[data-diff=add]{animation:mockup-code-add .45s cubic-bezier(.2, .8, .2, 1) var(--_delay) both}&>pre[data-cursor]>code:after{content:"";vertical-align:text-bottom;background:currentColor;width:.6em;height:1.15em;margin-inline-start:.1em;animation:1s step-end infinite mockup-code-cursor;display:inline-block}&[data-wrap]{grid-template-columns:minmax(0,1fr)}&[data-wrap]>pre{white-space:pre-wrap;overflow-wrap:anywhere;text-indent:-3.25ch;padding-inline-start:calc(var(--_px) + 3.25ch)}&[data-wrap]>pre:not([data-prefix]):not(:where([data-numbers]>pre)){text-indent:0;padding-inline-start:var(--_px)}&[data-variant=muted],&[data-variant=outline]{--_fg:var(--foreground);--_dim:var(--muted-foreground);--_success:oklch(52% .14 150);--_warning:oklch(58% .14 70);--_info:oklch(52% .14 250);--_destructive:var(--destructive)}&[data-variant=muted]{--_bg:var(--muted)}&[data-variant=outline]{--_bg:var(--card);border:1px solid var(--border)}&[data-variant=primary]{--_bg:var(--primary);--_fg:var(--primary-foreground);--_dim:color-mix(in oklch, var(--primary-foreground) 65%, var(--primary))}&[data-size=sm]{--_px:1rem;padding-block:1rem .75rem;font-size:.75rem}&[data-size=lg]{--_px:1.5rem;font-size:1rem}}@keyframes mockup-code-cursor{50%{opacity:0}}@keyframes mockup-code-remove{0%{color:var(--_fg);opacity:1;background:0 0}}@keyframes mockup-code-strike{0%{text-decoration-color:#0000}}@keyframes mockup-code-add{0%{color:var(--_fg);opacity:0;background:0 0;translate:-1.5rem}}@supports (order:sibling-index()){.mockup-code[data-animate]>pre{--_i:sibling-index()}}@supports not (order:sibling-index()){.mockup-code[data-animate]>pre:nth-child(2){--_i:2}.mockup-code[data-animate]>pre:nth-child(3){--_i:3}.mockup-code[data-animate]>pre:nth-child(4){--_i:4}.mockup-code[data-animate]>pre:nth-child(5){--_i:5}.mockup-code[data-animate]>pre:nth-child(6){--_i:6}.mockup-code[data-animate]>pre:nth-child(7){--_i:7}.mockup-code[data-animate]>pre:nth-child(8){--_i:8}.mockup-code[data-animate]>pre:nth-child(9){--_i:9}.mockup-code[data-animate]>pre:nth-child(10){--_i:10}.mockup-code[data-animate]>pre:nth-child(11){--_i:11}.mockup-code[data-animate]>pre:nth-child(12){--_i:12}.mockup-code[data-animate]>pre:nth-child(13){--_i:13}.mockup-code[data-animate]>pre:nth-child(14){--_i:14}.mockup-code[data-animate]>pre:nth-child(15){--_i:15}.mockup-code[data-animate]>pre:nth-child(16){--_i:16}.mockup-code[data-animate]>pre:nth-child(n+17){--_i:17}}}@media (prefers-reduced-motion:reduce){@layer components{.mockup-code>pre[data-cursor]>code:after,.mockup-code[data-animate]>pre,.mockup-code[data-animate]>pre>code{animation:none}}}@media print{@layer components{.mockup-code{print-color-adjust:exact;grid-template-columns:minmax(0,1fr);overflow-x:visible}.mockup-code>pre{white-space:pre-wrap;overflow-wrap:anywhere;text-indent:-3.25ch;padding-inline-start:calc(var(--_px) + 3.25ch)}.mockup-code>pre:not([data-prefix]):not(:where([data-numbers]>pre)){text-indent:0;padding-inline-start:var(--_px)}.mockup-code>pre[data-cursor]>code:after,.mockup-code[data-animate]>pre,.mockup-code[data-animate]>pre>code{animation:none}}}@media (prefers-contrast:more){@layer components{.mockup-code{--_dim:var(--_fg);border:1px solid var(--_fg)}}}@media (forced-colors:active){@layer components{.mockup-code{border:1px solid canvastext}.mockup-code>pre[data-highlight]{forced-color-adjust:none;color:highlighttext;background:highlight}.mockup-code>pre>code :is(ins,del){outline:1px solid canvastext}}}