@layer components{
code{font-family:var(--font-mono);font-size:.9em;padding:.125em .375em;background:var(--color-surface);border-radius:var(--radius);color:var(--color-text)}
pre{font-family:var(--font-mono);font-size:var(--text-sm);line-height:normal;padding:var(--space-4);background:var(--color-surface);border-radius:var(--radius-lg);overflow-x:auto;margin:var(--space-4)0;border:1px solid var(--color-border);scrollbar-width:thin;scrollbar-color:var(--color-border)transparent}
pre::-webkit-scrollbar{height:6px}
pre::-webkit-scrollbar-track{background:0 0}
pre::-webkit-scrollbar-thumb{background-color:var(--color-border);border-radius:3px}
pre::-webkit-scrollbar-thumb:hover{background-color:var(--color-text-muted)}
pre code{padding:0;background:0 0;border-radius:0;font-size:inherit}
@media(prefers-color-scheme:dark){
code{color:#e6edf3}
}
}
@layer components{
.post-content .code-block{margin:var(--space-5,1.5rem)0;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-lg,.75rem);background:var(--color-surface)}
.post-content .code-block__header{position:relative;display:flex;min-height:2.75rem;align-items:center;justify-content:space-between;gap:var(--space-3,.75rem);padding:.35rem .55rem .35rem 4rem;border-bottom:1px solid var(--color-border);background:color-mix(in srgb,var(--color-surface) 72%,var(--color-background))}
.post-content .code-block__header::before{position:absolute;left:1rem;top:50%;width:.55rem;height:.55rem;border-radius:50%;background:var(--color-danger,#e78284);box-shadow:1rem 0 var(--color-warning,#e5c890),2rem 0 var(--color-success,#a6c98b);content:"";transform:translateY(-50%)}
.post-content .code-block__meta{display:flex;min-width:0;align-items:baseline;gap:.65rem;font-family:var(--font-mono);font-size:var(--text-xs,.75rem)}
.post-content .code-block__title{overflow:hidden;color:var(--color-text);font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.post-content .code-block__lang{flex:none;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em}
.post-content .code-block>pre{margin:0;border:0;border-radius:0;background:var(--color-surface)}
@media(max-width:480px){
.post-content .code-block__header{padding-inline-start:3.5rem}
}
}