.css-block-container,.code-block-container{border:1px solid #374151;border-radius:.5rem;overflow:hidden;box-shadow:0 4px 6px -1px #0000001a}.inline-css-container{display:inline-block;position:relative}.inline-css-container:hover:after{content:"Live CSS";color:#60a5fa;white-space:nowrap;z-index:10;opacity:.9;background:#1f2937;border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem;position:absolute;top:-2rem;left:50%;transform:translate(-50%)}.language-css .text-yellow-400{font-weight:600}.language-css .text-blue-300{font-style:italic}@media (max-width:768px){.css-block-container pre,.code-block-container pre{padding:1rem;font-size:.875rem}}.code-block-container:hover .copy-button,.css-block-container:hover .copy-button{opacity:1}.copy-button{opacity:0;color:#9ca3af;cursor:pointer;background:#374151;border:none;border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem;transition:opacity .2s;position:absolute;top:.5rem;right:.5rem}.copy-button:hover{color:#f3f4f6;background:#4b5563}.css-block-container pre::-webkit-scrollbar{height:8px}.code-block-container pre::-webkit-scrollbar{height:8px}.css-block-container pre::-webkit-scrollbar-track{background:#1f2937}.code-block-container pre::-webkit-scrollbar-track{background:#1f2937}.css-block-container pre::-webkit-scrollbar-thumb{background:#4b5563;border-radius:4px}.code-block-container pre::-webkit-scrollbar-thumb{background:#4b5563;border-radius:4px}.css-block-container pre::-webkit-scrollbar-thumb:hover{background:#6b7280}.code-block-container pre::-webkit-scrollbar-thumb:hover{background:#6b7280}