.code-block-container{margin:2rem 0;position:relative}.code-block-glass{background:rgb(255 255 255 / .1);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgb(255 255 255 / .2);padding:0;box-shadow:0 8px 32px rgb(0 0 0 / .1),0 4px 16px rgb(0 0 0 / .05);transition:all 0.3s ease}.code-block-glass:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgb(0 0 0 / .15),0 6px 20px rgb(0 0 0 / .1);border-color:rgb(255 255 255 / .3)}.code-block-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;background:rgb(255 255 255 / .05);border-bottom:1px solid rgb(255 255 255 / .1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.code-block-heading{display:flex;align-items:center;gap:.75rem}.language-indicator{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:.25rem .5rem;border-radius:6px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 2px 8px rgb(102 126 234 / .3)}.code-block-heading h3{margin:0;font-size:1.1rem;font-weight:600;color:#2d3748;text-shadow:0 1px 2px rgb(255 255 255 / .8)}.code-copy-btn{position:relative;background:rgb(255 255 255 / .2);border:1px solid rgb(255 255 255 / .3);border-radius:8px;padding:.5rem;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.code-copy-btn:hover{background:rgb(255 255 255 / .3);border-color:rgb(255 255 255 / .4);transform:scale(1.05)}.code-copy-btn:active{transform:scale(.98)}.code-copy-btn svg{color:#4a5568;transition:color 0.2s ease}.code-copy-btn:hover svg{color:#2d3748}.copy-tooltip{position:absolute;top:-35px;left:50%;transform:translateX(-50%);background:rgb(0 0 0 / .8);color:#fff;padding:.25rem .5rem;border-radius:4px;font-size:.75rem;white-space:nowrap;opacity:0;visibility:hidden;transition:all 0.2s ease;pointer-events:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.copy-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:4px solid #fff0;border-top-color:rgb(0 0 0 / .8)}.code-copy-btn:hover .copy-tooltip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(-2px)}.copy-tooltip.copied{background:rgb(34 197 94 / .9);opacity:1;visibility:visible;transform:translateX(-50%) translateY(-2px)}.copy-tooltip.copied::after{border-top-color:rgb(34 197 94 / .9)}.code-block-content{padding:0;background:rgb(0 0 0 / .02)}.code-block-content pre{margin:0;padding:1.5rem;background:#fff0;border:none;border-radius:0;overflow-x:auto;font-family:'JetBrains Mono','Fira Code','Monaco','Cascadia Code','Roboto Mono',monospace;font-size:.9rem;line-height:1.6}.code-block-content code{background:#fff0;padding:0;border:none;border-radius:0;color:#2d3748;text-shadow:0 1px 1px rgb(255 255 255 / .5)}.code-block-content pre::-webkit-scrollbar{height:6px;width:6px}.code-block-content pre::-webkit-scrollbar-track{background:rgb(255 255 255 / .1);border-radius:3px}.code-block-content pre::-webkit-scrollbar-thumb{background:rgb(255 255 255 / .3);border-radius:3px}.code-block-content pre::-webkit-scrollbar-thumb:hover{background:rgb(255 255 255 / .5)}@media (prefers-color-scheme:dark){.code-block-glass{background:rgb(0 0 0 / .3);border-color:rgb(255 255 255 / .1)}.code-block-header{background:rgb(0 0 0 / .2);border-bottom-color:rgb(255 255 255 / .05)}.code-block-heading h3{color:#e2e8f0;text-shadow:0 1px 2px rgb(0 0 0 / .8)}.code-copy-btn{background:rgb(0 0 0 / .2);border-color:rgb(255 255 255 / .2)}.code-copy-btn:hover{background:rgb(0 0 0 / .3)}.code-copy-btn svg{color:#a0aec0}.code-copy-btn:hover svg{color:#e2e8f0}.code-block-content{background:rgb(0 0 0 / .1)}.code-block-content code{color:#e2e8f0;text-shadow:0 1px 1px rgb(0 0 0 / .5)}}@media (max-width:768px){.code-block-header{padding:1rem;flex-direction:column;align-items:flex-start;gap:.75rem}.code-copy-btn{align-self:flex-end;margin-top:-2rem}.code-block-content pre{padding:1rem;font-size:.85rem}}@keyframes copySuccess{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}.code-copy-btn.copied{animation:copySuccess 0.3s ease}.code-copy-btn.copied svg{color:#22c55e}