@layer components{.code{border-radius:calc((var(--radius-chip) - 2px) * var(--corner-scale));corner-shape:var(--corner-shape);background:var(--code-tone,var(--color-surface-chip));color:var(--code-ink,var(--color-text-strong));box-shadow:inset 0 0 0 .5px var(--code-line,var(--color-line-contour));font:400 .875em/1.4 var(--font-family-mono);font-variant-ligatures:none;overflow-wrap:anywhere;padding:.125em .375em;@media (forced-colors:active){outline-offset:-1px;outline:1px solid canvastext}}.code-block{--code-radius:var(--radius-control);--code-padding-x:1rem;--code-padding-y:.875rem;padding:var(--code-padding-y) var(--code-padding-x);border-radius:calc(var(--code-radius) * var(--corner-scale));corner-shape:var(--corner-shape);background:var(--color-surface-inset);color:var(--color-text-strong);box-shadow:var(--shadow-pressed);font:400 .8125rem/1.65 var(--font-family-mono);font-variant-ligatures:none;tab-size:2;white-space:pre;scrollbar-width:thin;scrollbar-color:var(--color-line-strong) transparent;overscroll-behavior-x:contain;margin:0;overflow:auto}.code-block:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.code-block:has(.code-line){counter-reset:code-line;align-content:start;display:grid}@media (forced-colors:active){.code-block{outline-offset:-1px;outline:1px solid canvastext}}.code-line{min-height:1lh;margin-inline:calc(-1 * var(--code-padding-x));padding-inline:var(--code-padding-x);counter-increment:code-line;display:block;&.code-line-highlight{background:color-mix(in oklab, var(--color-text-strong) 6%, transparent);box-shadow:inset 2px 0 0 var(--color-text-strong)}&.code-line-added{background:color-mix(in oklab, var(--color-success) 11%, transparent);box-shadow:inset 2px 0 0 var(--color-success)}&.code-line-removed{background:color-mix(in oklab, var(--color-danger) 10%, transparent);color:var(--color-text-body);box-shadow:inset 2px 0 0 var(--color-danger)}@media (forced-colors:active){&:is(.code-line-highlight,.code-line-added,.code-line-removed){outline-offset:-1px;outline:1px solid highlight}}}.code-numbered{& .code-line:before{content:counter(code-line);width:2ch;color:var(--color-text-disabled);text-align:end;-webkit-user-select:none;user-select:none;margin-inline-end:1.25rem;display:inline-block}& .code-line:is(.code-line-highlight,.code-line-added,.code-line-removed):before{color:var(--color-text-muted)}}.code-panel{--code-radius:var(--radius-control);border-radius:calc(var(--code-radius) * var(--corner-scale));corner-shape:var(--corner-shape);background:var(--color-surface-inset);min-width:0;box-shadow:var(--shadow-pressed);flex-direction:column;margin:0;display:flex;overflow:clip;& .code-block{box-shadow:none;background:0 0;border-radius:0;&:focus-visible{outline-offset:-2px}}& .btn{--btn-height:2rem;--btn-radius:calc(var(--code-radius) - 4px / var(--corner-scale));--btn-font-size:.78125rem;--btn-padding-x:.625rem;--icon-size:.875rem;--icon-offset:-.0625rem;min-height:var(--btn-height)}@media (forced-colors:active){outline-offset:-1px;outline:1px solid canvastext}}.code-header{border-bottom:1px solid var(--color-line-hair);flex:none;justify-content:space-between;align-items:center;gap:.75rem;min-height:2.5rem;padding-block:0;padding-inline:1rem 4px;display:flex}.code-title{--icon-size:.875rem;min-width:0;color:var(--color-text-muted);font:400 .75rem/1.4 var(--font-family-mono);text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:.5rem;margin:0;display:inline-flex;overflow:hidden}}@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-5:oklch(96.5% .0011 265);--color-zinc-30:oklch(78% .0025 265);--color-zinc-40:oklch(68.6% .0028 265);--color-zinc-60:oklch(48.6% .003 265);--color-zinc-70:oklch(39.8% .0028 265);--color-zinc-95:oklch(19.4% .0019 265);--color-zinc-100:oklch(15% .0016 265);--color-surface-inset:light-dark(oklch(96.6% .0011 265),oklch(16.4% .0017 265));--color-text-body:light-dark(oklch(39.8% .0028 265),oklch(80% .0025 265));--color-text-strong:light-dark(oklch(21% .0022 265),oklch(95% .0012 265));--color-text-muted:light-dark(oklch(48.6% .003 265),oklch(68.6% .0028 265));--color-text-disabled:light-dark(oklch(68.6% .0028 265),oklch(48.6% .003 265));--color-white:oklch(100% 0 none);--font-family-mono:var(--font-mono,ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-surface-chip:light-dark(oklch(96.5% .0011 265),oklch(100% 0 none/.07));--color-line-hair:light-dark(oklch(22% .002 265/.065),oklch(100% 0 none/.075));--color-line-contour:light-dark(oklch(22% .002 265/.12),oklch(100% 0 none/.14));--color-line-strong:light-dark(oklch(22% .002 265/.2),oklch(100% 0 none/.23));--color-focus:light-dark(oklch(24.6% .0022 265),oklch(93.2% .0015 265));--color-lip:light-dark(oklch(100% 0 none/.9),oklch(100% 0 none/.04));--color-success:light-dark(oklch(52% .12 150),oklch(78% .12 150));--color-danger:light-dark(oklch(54% .17 25),oklch(74% .14 22));--shadow-pressed:inset 0 1px 2px -.5px light-dark(oklch(18% 0 none/.07),oklch(0% 0 none/.5)), inset 0 0 0 .5px var(--color-line-contour), 0 .5px 0 var(--color-lip);--radius-chip:.375rem;--radius-control:.625rem;--color-code-function:var(--ui-code-function);--color-code-keyword:var(--ui-code-keyword);--color-code-number:var(--ui-code-number);--color-code-property:var(--ui-code-property);--color-code-string:var(--ui-code-string);--color-code-surface:light-dark(var(--color-zinc-0),var(--color-zinc-95));--font-mono:"IBM Plex Mono"}}