/* A readable code surface; the scroll cues never intercept selection or input. */
.article-code{--code-surface:var(--line);--code-edge-size:24px}
.article-code .code-artifact-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;margin:0 0 8px;padding:0;text-box-trim:none}
.code-artifact-label{min-width:0;overflow-wrap:anywhere}
.code-artifact-language{color:var(--muted)}
/* Keep the tooltip above the isolated code surface during the press transform. */
.code-artifact-copy{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
.code-artifact-copy[hidden]{display:none}
.code-artifact-copy[aria-disabled=true]{cursor:wait}
.code-artifact-copy .tool-icon svg{position:absolute;inset:0}
.code-artifact-copy .code-icon-check{opacity:0;transform:scale(.8)}
.article-code[data-copy-state=copied] .code-icon-copy{opacity:0;transform:scale(.8)}
.article-code[data-copy-state=copied] .code-icon-check{opacity:1;transform:scale(1)}
.article-code .code-artifact-copy .tool-tooltip{inset-inline-start:auto;inset-inline-end:0;transform:translateY(-2px);transform-origin:top right}
.article-code .code-artifact-copy:not([data-tooltip-dismissed]):focus-visible .tool-tooltip{transform:none}
@media(hover:hover) and (pointer:fine){
  .article-code .code-artifact-copy:not([data-tooltip-dismissed]):hover .tool-tooltip{transform:none}
}
.code-artifact-window{position:relative;background:var(--code-surface);border-radius:var(--article-surface-radius,4px);overflow:hidden;isolation:isolate}
.code-artifact-scroll{display:block;box-sizing:border-box;max-height:424px;margin:0;padding:16px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;direction:ltr;text-align:left;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--type-body-size);line-height:var(--type-body-leading);font-feature-settings:normal;font-variant-ligatures:none;letter-spacing:normal;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2}
/* Preserve native dragging while removing the platform's opaque scrollbar track.
   Without JS, the thin thumb stays visible. Enhancement hides it only while idle. */
.code-artifact-scroll{scrollbar-width:thin;scrollbar-color:var(--muted) transparent}
.code-artifact-scroll[data-scroll-state=ready],.code-artifact-scroll[data-scroll-state=idle]{scrollbar-color:transparent transparent}
/* Trim the inner code, not the scrollport: trimmed overflow can create a false scrollbar. */
.article-code .code-artifact-scroll{text-box-trim:none;padding-block:16px calc(16px + var(--baseline-scrollbar-pad,0px))}
.code-artifact-scroll code{--baseline-inset:0px;--baseline-scrollbar-pad:0px;display:block;width:auto;min-width:0;max-width:100%;font-family:inherit;letter-spacing:normal;white-space:inherit}
/* Keep the common edge wrapper unfiltered: sibling layers sample the code itself. */
.code-artifact-edge{position:absolute;pointer-events:none;z-index:1;--code-edge-opacity:0}
.code-artifact-edge::before,.code-artifact-edge::after{content:"";position:absolute;inset:0;opacity:var(--code-edge-opacity);pointer-events:none}
.code-artifact-edge::before{background:linear-gradient(var(--code-edge-direction),var(--code-surface),transparent);backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);mask-image:linear-gradient(var(--code-edge-direction),#000,transparent)}
.code-artifact-edge::after{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);mask-image:linear-gradient(var(--code-edge-direction),#000,transparent 60%)}
.code-artifact-edge[data-edge=top]{inset:0 var(--code-scrollbar-y,0px) auto 0;height:var(--code-edge-size);--code-edge-direction:to bottom;--code-edge-opacity:var(--code-edge-top,0)}
.code-artifact-edge[data-edge=bottom]{inset:auto var(--code-scrollbar-y,0px) 0 0;height:var(--code-edge-size);--code-edge-direction:to top;--code-edge-opacity:var(--code-edge-bottom,0)}
.code-artifact-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.article-code[data-copy-state=error] .code-artifact-status{position:static;display:block;width:auto;height:auto;margin-top:12px;overflow:visible;clip-path:none;white-space:normal;color:var(--ink)}
@media(prefers-reduced-motion:no-preference){
  .code-artifact-scroll[data-scroll-state=scrolling],.code-artifact-scroll[data-scroll-state=idle]{transition:scrollbar-color 150ms ease-out}
  .code-artifact-copy .tool-icon svg{transition:opacity 300ms cubic-bezier(.2,0,0,1),transform 300ms cubic-bezier(.2,0,0,1)}
  .code-artifact-copy{transition:transform 150ms ease-out}
  .code-artifact-copy:active{transform:scale(.96)}
}
@media(prefers-reduced-motion:reduce){
  .code-artifact-copy .tool-icon svg{transform:none}
  .code-artifact-edge,.code-artifact-edge::before,.code-artifact-edge::after{backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media(forced-colors:active){
  .code-artifact-edge{display:none}
  .code-artifact-window{background:Canvas}
  .article-code .code-artifact-scroll{scrollbar-width:auto;scrollbar-color:auto;transition:none}
}
@media print{
  .code-artifact-window{overflow:visible}
  .code-artifact-copy,.code-artifact-edge,.code-artifact-status{display:none}
  .code-artifact-scroll{max-height:none;overflow:visible;white-space:pre-wrap;overflow-wrap:anywhere}
}