.code-block-wrapper{position:relative;margin:1.5rem 0;border-radius:.5rem;overflow:hidden;border:1px solid color-mix(in oklab,var(--border),transparent 60%);background:var(--surface-1)}.code-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:color-mix(in oklab,var(--surface-2),transparent 40%);border-bottom:1px solid color-mix(in oklab,var(--border),transparent 60%)}.lang-badge{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-2);font-family:Iosevka,monospace}.copy-button{display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem;background:color-mix(in oklab,var(--surface-1),transparent 20%);border:1px solid color-mix(in oklab,var(--border),transparent 60%);border-radius:.375rem;color:var(--text-2);cursor:pointer;font-size:.75rem;font-weight:500;transition:all .2s ease;font-family:inherit}.copy-button:hover{background:color-mix(in oklab,var(--brand),transparent 80%);color:var(--brand);border-color:color-mix(in oklab,var(--brand),transparent 60%)}.copy-button.copied{background:color-mix(in oklab,var(--brand),transparent 70%);color:var(--brand);border-color:color-mix(in oklab,var(--brand),transparent 50%)}.code-block-wrapper>pre{margin:0;padding:1.5rem;overflow-x:auto;background:var(--surface-1);font-family:Iosevka,monospace;font-size:.9rem;line-height:1.75;border-radius:0}.code-block-wrapper>pre code{background:none;padding:0;border-radius:0;color:var(--text-1);display:block;word-spacing:.2em}.code-block-wrapper::-webkit-scrollbar{height:.5rem}.code-block-wrapper::-webkit-scrollbar-track{background:color-mix(in oklab,var(--surface-2),transparent 40%)}.code-block-wrapper::-webkit-scrollbar-thumb{background:color-mix(in oklab,var(--border),transparent 40%);border-radius:.25rem}.code-block-wrapper::-webkit-scrollbar-thumb:hover{background:color-mix(in oklab,var(--border),transparent 20%)}@media (prefers-color-scheme: light){.code-block-wrapper{background:#fff;border:1px solid #e5e7eb}.code-header{background:#f9fafb;border-bottom-color:#e5e7eb}.code-block-wrapper>pre{background:#fff!important}.code-block-wrapper>pre code{background:#fff!important;color:#1f2937!important}.code-block-wrapper span{background:transparent!important}.code-block-wrapper [style*="color:"]{color:inherit!important}.code-block-wrapper [style*="#e57474"]{color:#dc2626!important}.code-block-wrapper [style*="#93cfa1"]{color:#059669!important}.code-block-wrapper [style*="#67b0e8"]{color:#2563eb!important}.code-block-wrapper [style*="#8ccf7e"]{color:#16a34a!important}.code-block-wrapper [style*="#c47fd5"]{color:#9333ea!important}.code-block-wrapper [style*="#6c7d8c"]{color:#6b7280!important}.code-block-wrapper [style*="#dadada"]{color:#1f2937!important}.copy-button{background:#f3f4f6;border-color:#d1d5db;color:#4b5563}.copy-button:hover,.copy-button.copied{background:#fee2e2;color:#dc2626;border-color:#fca5a5}}@media (prefers-color-scheme: dark){.code-block-wrapper{background:var(--surface-1);border:1px solid color-mix(in oklab,var(--border),transparent 60%)}.code-header{background:color-mix(in oklab,var(--surface-2),transparent 40%);border-bottom-color:color-mix(in oklab,var(--border),transparent 60%)}.code-block-wrapper>pre{background:var(--surface-1)}}