.expandable-code{position:relative;margin:var(--space-m)0;border-radius:var(--radius-s);overflow:hidden;border:2px solid var(--color-border);background:var(--color-code-bg)}.expandable-code .highlight,.expandable-code pre{border:none!important;border-radius:0!important;margin:0}.expandable-code .chroma,.expandable-code pre{position:relative;max-height:400px;overflow-y:hidden;overflow-x:auto;transition:max-height .3s cubic-bezier(.4,0,.2,1)}.expandable-code.expanded .chroma,.expandable-code.expanded pre{max-height:none;overflow-y:auto}.expandable-code .chroma::after,.expandable-code pre::after{content:'';position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(transparent,var(--color-code-bg));pointer-events:none;transition:opacity .3s ease}.expandable-code.expanded .chroma::after,.expandable-code.expanded pre::after{opacity:0}.code-lang{position:absolute;top:8px;left:10px;z-index:10;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:rgba(224,222,244,.65);background:rgba(25,24,23,.85);padding:2px 6px;border-radius:3px;pointer-events:none}.expandable-code.has-lang pre{padding-top:2.3rem}.code-toggle~.code-copy{right:72px}.code-toggle,.code-copy{position:absolute;top:8px;right:8px;background:rgba(43,40,37,.88);color:#e0def4;border:1px solid rgba(224,222,244,.28);border-radius:4px;padding:3px 8px;font-family:var(--font-mono);font-size:11px;cursor:pointer;transition:background .15s ease,border-color .15s ease;z-index:10;backdrop-filter:blur(4px)}.code-toggle:hover,.code-copy:hover{background:rgba(65,60,55,.96);border-color:rgba(224,222,244,.55)}.code-toggle::before{content:'Expand'}.expandable-code.expanded .code-toggle::before{content:'Collapse'}.code-copy::before{content:'Copy'}.code-copy.copied::before{content:'Copied!';color:#9ccfd8}.expandable-code .chroma pre,.expandable-code pre{margin:0;padding:1rem;overflow-x:auto}.expandable-code.has-lang .chroma pre,.expandable-code.has-lang>pre{padding-top:2.3rem}.expandable-code:not(.expanded) .chroma .lnt{opacity:.75}.code-toggle:focus-visible,.code-copy:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}@media(max-width:768px){.code-copy,.code-toggle{padding:3px 6px;font-size:11px}.code-toggle~.code-copy{right:64px}}