.expandable-code{position:relative;margin:1rem 0;border-radius:8px;overflow:hidden;transition:all .3s ease}.expandable-code .chroma,.expandable-code pre{position:relative;max-height:400px;overflow:hidden;transition:max-height .3s ease}.expandable-code.expanded .chroma,.expandable-code.expanded pre{max-height:none}.expandable-code .chroma::after,.expandable-code pre::after{content:'';position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(transparent,#232136);pointer-events:none;transition:opacity .3s ease}.expandable-code.expanded .chroma::after,.expandable-code.expanded pre::after{opacity:0}.expandable-code:not(.expanded):hover .chroma::after,.expandable-code:not(.expanded):hover pre::after{background:linear-gradient(transparent,rgba(35,33,54,.8))}.code-toggle{position:absolute;top:8px;right:8px;background:rgba(35,33,54,.8);color:#e0def4;border:1px solid rgba(224,222,244,.3);border-radius:4px;padding:4px 8px;font-size:12px;cursor:pointer;transition:all .2s ease;z-index:10;backdrop-filter:blur(4px)}.code-toggle:hover{background:rgba(35,33,54,.9);border-color:rgba(224,222,244,.5)}.code-toggle::before{content:'Expand'}.expandable-code.expanded .code-toggle::before{content:'Collapse'}.code-copy{position:absolute;top:8px;right:70px;background:rgba(35,33,54,.8);color:#e0def4;border:1px solid rgba(224,222,244,.3);border-radius:4px;padding:4px 8px;font-size:12px;cursor:pointer;transition:all .2s ease;z-index:10;backdrop-filter:blur(4px)}.code-copy:hover{background:rgba(35,33,54,.9);border-color:rgba(224,222,244,.5)}.code-copy::before{content:'Copy'}.code-copy.copied::before{content:'Copied!';color:#9ccfd8}@media(max-width:768px){.code-copy{right:60px;padding:3px 6px;font-size:11px}.code-toggle{padding:3px 6px;font-size:11px}}.expandable-code .chroma,.expandable-code pre{transition:max-height .3s cubic-bezier(.4,0,.2,1)}.expandable-code .chroma pre,.expandable-code pre{margin:0;padding:1rem;overflow-x:auto}.expandable-code:not(.expanded) .chroma .lnt{opacity:.8}.expandable-code:not(.expanded):hover{box-shadow:0 4px 12px rgba(0,0,0,.15)}.code-toggle:focus,.code-copy:focus{outline:2px solid #c4a7e7;outline-offset:2px}