@layer properties,theme,base;@layer components{:where(.jx-code-card){--readonly-code-bg:color-mix(in oklab, var(--muted) 42%, var(--background));--readonly-code-border:color-mix(in oklab, var(--border) 18%, transparent);--readonly-code-meta-bg:color-mix(in oklab, var(--accent) 12%, var(--background));--readonly-code-meta-fg:color-mix(in oklab, var(--accent) 58%, var(--foreground));--tok-foreground:var(--foreground);--tok-background:transparent;--tok-token-comment:color-mix(in oklch, var(--foreground) 44%, transparent);--tok-token-string:var(--accent);--tok-token-string-expression:var(--accent);--tok-token-keyword:var(--primary);--tok-token-constant:color-mix(in oklch, var(--secondary) 78%, var(--foreground));--tok-token-function:color-mix(in oklch, var(--primary) 62%, var(--foreground));--tok-token-parameter:color-mix(in oklch, var(--foreground) 78%, var(--accent));--tok-token-punctuation:color-mix(in oklch, var(--foreground) 62%, transparent);--tok-token-link:var(--accent);--tok-token-inserted:var(--success);--tok-token-deleted:var(--error);--tok-token-changed:var(--warning)}:where(.dark .jx-code-card){--readonly-code-bg:color-mix(in oklab, var(--muted) 78%, var(--background));--readonly-code-meta-bg:color-mix(in oklab, var(--accent) 18%, var(--background));--readonly-code-meta-fg:color-mix(in oklab, var(--accent) 60%, oklch(100% 0 0));--tok-token-comment:color-mix(in oklch, var(--foreground) 30%, transparent);--tok-token-constant:color-mix(in oklch, var(--secondary) 70%, oklch(0% 0 0));--tok-token-function:color-mix(in oklch, var(--primary) 58%, oklch(100% 0 0));--tok-token-parameter:color-mix(in oklch, var(--foreground) 76%, var(--accent));--tok-token-punctuation:color-mix(in oklch, var(--foreground) 36%, transparent)}:where(.jx-light .jx-code-card){--readonly-code-bg:color-mix(in oklab, var(--muted) 42%, var(--background));--readonly-code-meta-bg:color-mix(in oklab, var(--accent) 12%, var(--background));--readonly-code-meta-fg:color-mix(in oklab, var(--accent) 58%, var(--foreground));--tok-token-comment:color-mix(in oklch, var(--foreground) 44%, transparent);--tok-token-constant:color-mix(in oklch, var(--secondary) 78%, var(--foreground));--tok-token-function:color-mix(in oklch, var(--primary) 62%, var(--foreground));--tok-token-parameter:color-mix(in oklch, var(--foreground) 78%, var(--accent));--tok-token-punctuation:color-mix(in oklch, var(--foreground) 62%, transparent)}:where(.jx-code-card pre){overscroll-behavior-x:contain;scrollbar-gutter:stable both-edges;padding-block:.875rem;padding-inline:max(.875rem - var(--jx-scrollbar-thin,0px), 0px);tab-size:4;margin:0;font-size:12.5px;line-height:1.6;overflow:auto visible}:where([data-jx-code-card-scroll]):before,:where([data-jx-code-card-scroll]):after{content:"";pointer-events:none;opacity:0;inline-size:1.75rem;transition:opacity var(--motion-150) var(--motion-ease-out);-webkit-backdrop-filter:contrast(.5);position:absolute;inset-block:0}:where([data-jx-code-card-scroll]):before{inset-inline-start:0;-webkit-mask:linear-gradient(90deg,#000,#0000);mask:linear-gradient(90deg,#000,#0000);-webkit-mask-image:}:where([data-jx-code-card-scroll]):after{inset-inline-end:0;-webkit-mask:linear-gradient(270deg,#000,#0000);mask:linear-gradient(270deg,#000,#0000);-webkit-mask-image:}:where([data-jx-code-card-scroll][data-hscroll-start]):before,:where([data-jx-code-card-scroll][data-hscroll-end]):after{opacity:1}}:where(.jx-code-card pre:focus-visible){outline:2px solid var(--ring);outline-offset:-2px}:where(.jx-code-card-copy:focus-visible){outline:2px solid var(--ring);outline-offset:2px}.jx-code-card-copy.copied{background-color:color-mix(in oklab, var(--jx-tonal) 12%, transparent)!important;color:var(--jx-tonal)!important}@media (prefers-reduced-motion:reduce){:where(.jx-code-card-copy),:where([data-jx-code-card-scroll]):before,:where([data-jx-code-card-scroll]):after{transition:none}}