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