@keyframes copy-button-scale{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.copy-button-icon{animation:copy-button-scale var(--copy-animation-duration,.5s) cubic-bezier(.215, .61, .355, 1)}@media (prefers-reduced-motion:reduce){.copy-button-icon{animation:none}}
.copyable-callout{--callout-padding-x:32px;--callout-surface:var(--blue-surface);--callout-accent:var(--blue-foreground);--callout-ink:color-mix(in oklch, var(--callout-accent) 85%, var(--foreground));--callout-hover:color-mix(in oklch, var(--blue-surface) 92%, var(--blue-foreground));padding:24px var(--callout-padding-x);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--callout-surface);color:var(--foreground);margin-block:32px;position:relative;overflow:hidden}.copyable-callout[data-callout-kind=prompt]{--callout-surface:var(--primary-surface);--callout-accent:var(--primary);--callout-hover:var(--primary-surface-hover)}.copyable-callout[data-callout-kind=example]{--callout-surface:var(--muted);--callout-accent:var(--muted-foreground);--callout-hover:var(--secondary)}.copyable-callout:before{content:"";border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--callout-accent);pointer-events:none;width:.25rem;height:min(6rem,100% - 3rem);position:absolute;top:24px;left:0}.copyable-callout-header{justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;display:flex}.copyable-callout-category{color:var(--callout-ink);margin-bottom:4px;font-size:12px;font-weight:510;line-height:16px}.copyable-callout .copyable-callout-header .copyable-callout-heading{color:var(--foreground);margin:0;font-size:20px;font-weight:590;line-height:28px}.copyable-callout-viewport{max-height:calc(var(--callout-preview-lines,6) * 1lh);transition:max-height .24s ease-out;position:relative;overflow:hidden}.copyable-callout[data-expanded=true] .copyable-callout-viewport{max-height:var(--callout-content-height,none)}.copyable-callout-viewport[data-truncated=true]:after{content:"";background:linear-gradient(to bottom, transparent, var(--callout-surface));pointer-events:none;height:3lh;position:absolute;inset:auto 0 0}.copyable-callout-inner{display:flow-root}.copyable-callout .copyable-callout-copy{flex-shrink:0}.copyable-callout .copyable-callout-body{font:inherit;white-space:pre-wrap;background:0 0;border:0;margin:0;padding:0}.copyable-callout .copyable-callout-body>:last-child,.copyable-callout .copyable-callout-body>:last-child>:last-child{margin-bottom:0}.copyable-callout .copyable-callout-toggle{width:calc(100% + 2 * var(--callout-padding-x));height:68px;margin:0 calc(-1 * var(--callout-padding-x)) -24px;padding:8px var(--callout-padding-x) 24px;color:var(--callout-ink);cursor:pointer;background:0 0;border-radius:0;display:flex}.copyable-callout .copyable-callout-toggle:hover{background:var(--callout-hover)}.copyable-callout .copyable-callout-toggle:active{scale:1}@media (max-width:639px){.copyable-callout{--callout-padding-x:24px}}@media (prefers-reduced-motion:reduce){.copyable-callout-viewport{transition:none}}@media print{.copyable-callout .copyable-callout-viewport{transition:none;overflow:visible;max-height:none!important}.copyable-callout-viewport:after,.copyable-callout-copy,.copyable-callout-toggle{display:none!important}}