.code-variants-container{position:relative;margin:1rem 0}.code-toggle-wrapper{display:flex;justify-content:flex-end;margin-bottom:1rem}.code-toggle-container{position:relative;display:flex;background:#ffffff1a;backdrop-filter:blur(8px);border-radius:20px;padding:4px;border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 12px #0000001a;overflow:hidden}.code-toggle-slider{position:absolute;top:4px;left:4px;height:calc(100% - 8px);width:calc(50% - 4px);background:linear-gradient(135deg,#3700ffcc,#8aa6af99);border-radius:16px;transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #3700ff4d;z-index:1}.code-toggle-slider-right{transform:translate(100%)}.code-toggle-option{position:relative;z-index:2;flex:1;padding:12px 20px;background:transparent;border:none;border-radius:16px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;align-items:center;gap:4px;min-width:120px}.code-toggle-label{font-family:Roboto Condensed,Roboto,Arial,Helvetica,sans-serif;font-weight:600;font-size:14px;line-height:1;transition:color .3s ease}.code-toggle-badge{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;opacity:.8;transition:opacity .3s ease}.code-toggle-option:not(.active) .code-toggle-label{color:#ffffffb3}.code-toggle-option:not(.active) .code-toggle-badge{color:#ffffff80}.code-toggle-option.active .code-toggle-label{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}.code-toggle-option:not(.active) .code-toggle-label{color:#4f46e5;opacity:.7;text-shadow:none}.code-toggle-option.active .code-toggle-badge{color:#ffffffe6}.code-toggle-option:hover:not(.active){background:#ffffff0d}.code-toggle-option:not(.active) .code-toggle-label{text-shadow:0 1px 2px rgba(255,255,255,.9)}.code-toggle-option:hover:not(.active) .code-toggle-label{color:#4f46e5;text-shadow:0 1px 2px rgba(0,0,0,.3)}.code-display-container{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 8px 25px #00000026;border:1px solid rgba(255,255,255,.1)}.code-display-container pre{margin:0!important;border-radius:12px!important;padding-top:50px!important}.code-display-container code{font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,Source Code Pro,monospace!important}.code-display-container:before{content:"";position:absolute;top:0;left:0;right:0;height:45px;background:linear-gradient(135deg,#2d3748,#4a5568);border-bottom:1px solid rgba(255,255,255,.1);z-index:1}.code-display-container:after{content:"";position:absolute;top:15px;left:16px;width:12px;height:12px;background:#ff5f57;border-radius:50%;box-shadow:20px 0 #ffbd2e,40px 0 #28ca42;z-index:2}.code-display-container .code-header-info{position:absolute;top:12px;left:50%;transform:translate(-50%);color:#cbd5e0;font-size:13px;font-weight:500;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;z-index:2;display:flex;align-items:center;gap:8px}.code-display-container .code-header-info:before{content:"⚡";font-size:12px}.code-display-container .code-copy-button{position:absolute;top:8px;right:16px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#cbd5e0;padding:6px 10px;border-radius:6px;font-size:11px;cursor:pointer;transition:all .2s ease;z-index:2;opacity:.7}.code-display-container .code-copy-button:hover{background:#fff3;opacity:1}@media (max-width: 768px){.code-toggle-wrapper{justify-content:center}.code-toggle-option{min-width:100px;padding:10px 16px}.code-toggle-label{font-size:13px}.code-toggle-badge{font-size:9px}.code-display-container:before{height:40px}.code-display-container pre{padding-top:45px!important}.code-display-container .code-header-info{font-size:12px;top:10px}.code-display-container .code-copy-button{top:8px;right:12px;font-size:10px;padding:4px 8px}}@media (max-width: 480px){.code-toggle-container{width:100%}.code-toggle-option{min-width:auto;padding:8px 12px}.code-toggle-label{font-size:12px}}.code-block{position:relative;border-radius:12px;overflow:hidden;box-shadow:0 8px 25px #00000026;border:1px solid rgba(255,255,255,.1);display:inline-block;min-width:300px;max-width:100%;width:auto}.code-block pre{margin:0!important;border-radius:12px!important;padding-top:50px!important;background-color:#2d2d2d!important;width:auto!important;min-width:300px}.code-block code{font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,Source Code Pro,monospace!important;display:block!important;width:auto!important}.code-block:before{content:"";position:absolute;top:0;left:0;right:0;height:45px;background:linear-gradient(135deg,#2d3748,#4a5568);border-bottom:1px solid rgba(255,255,255,.1);z-index:1}.code-block:after{content:"";position:absolute;top:15px;left:16px;width:12px;height:12px;background:#ff5f57;border-radius:50%;box-shadow:20px 0 #ffbd2e,40px 0 #28ca42;z-index:2}.code-block .code-header-info{position:absolute;top:12px;left:50%;transform:translate(-50%);color:#cbd5e0;font-size:13px;font-weight:500;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;z-index:2;display:flex;align-items:center;gap:8px}.code-block .code-header-info:before{content:"📄";font-size:12px}.code-block .code-copy-button{position:absolute;top:8px;right:16px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#cbd5e0;padding:6px 10px;border-radius:6px;font-size:11px;cursor:pointer;transition:all .2s ease;z-index:2;opacity:.7;min-width:50px}.code-block .code-copy-button:hover{background:#fff3;opacity:1}.docs-content .code-block pre{display:block!important;justify-content:initial!important;white-space:pre!important}.docs-content .code-block code.language-javascript,.docs-content .code-block code.language-bash{display:block!important;padding:0!important;margin:0!important;border-radius:0!important;background-color:transparent!important;box-sizing:border-box!important;width:auto!important;white-space:pre!important}.code-block pre,.code-block code{white-space:pre!important;tab-size:2!important}@media (max-width: 768px){.code-block{display:block;width:100%;min-width:auto}.code-block pre{min-width:auto}.code-block:before{height:40px}.code-block pre{padding-top:45px!important}.code-block .code-header-info{font-size:12px;top:10px;left:60px;transform:none}.code-block .code-copy-button{top:8px;right:12px;font-size:10px;padding:4px 8px;min-width:45px}}@media (max-width: 480px){.code-block .code-header-info{display:none}.code-block .code-copy-button{right:8px}}