.code-block-wrapper{background:var(--code-bg);border:1px solid var(--code-border);border-radius:12px;width:100%;max-width:720px;margin:1.5rem 0;transition:all .2s;position:relative;overflow:hidden;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a,inset 0 1px #ffffff0d}.code-block-wrapper:hover{transform:translateY(-1px);box-shadow:0 10px 15px -3px #00000026,0 4px 6px -4px #0000001a,inset 0 1px #ffffff0d}.code-block-wrapper .code-header{font-family:var(--font-mono);letter-spacing:.02em;color:var(--code-text);opacity:.7;border-bottom:1px solid var(--code-border);background:linear-gradient(#ffffff08 0%,#0000 100%);align-items:center;gap:8px;padding:12px 16px;font-size:.8em;font-weight:500;display:flex}.code-block-wrapper .code-header:before{content:"";opacity:.8;background-image:radial-gradient(circle,#ff5f56 5px,#0000 5px),radial-gradient(circle,#ffbd2e 5px,#0000 5px),radial-gradient(circle,#27ca40 5px,#0000 5px);background-position:0 0,18px 0,36px 0;background-repeat:no-repeat;background-size:12px 12px;width:52px;height:12px;margin-right:8px;display:inline-flex}.code-content{font-family:var(--font-mono);color:var(--code-text);background:var(--code-bg);tab-size:2;margin:0;padding:20px;font-size:.875em;line-height:1.7;overflow-x:auto}.code-content::-webkit-scrollbar{height:8px}.code-content::-webkit-scrollbar-track{background:#ffffff0d;border-radius:4px}.code-content::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:4px}.code-content::-webkit-scrollbar-thumb:hover{background:#ffffff40}.code-content code{color:inherit;white-space:pre;background:0 0;border:none;padding:0;font-family:inherit}.copy-button{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--code-text);font-size:.75rem;font-weight:500;font-family:var(--font-mono);cursor:pointer;z-index:10;opacity:0;background:#ffffff1a;border:1px solid #ffffff1a;border-radius:6px;padding:6px 12px;transition:all .15s;position:absolute;top:10px;right:10px;transform:translateY(-2px)}.code-block-wrapper:hover .copy-button{opacity:1;transform:translateY(0)}.copy-button:hover{background:#fff3;border-color:#fff3}.copy-button:active{transform:scale(.97)}.code-block-wrapper:has(.code-header) .copy-button{top:8px}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#5c6370;font-style:italic}.token.punctuation{color:#abb2bf}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted{color:#e5c07b}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#98c379}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:#56b6c2}.token.atrule,.token.attr-value,.token.keyword{color:#c678dd}.token.function,.token.class-name{color:#61afef}.token.regex,.token.important,.token.variable{color:#d19a66}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.language-json .token.property{color:#61afef}.language-json .token.string{color:#98c379}.language-json .token.number{color:#d19a66}.language-bash .token.function{color:#61afef}.language-bash .token.parameter{color:#e5c07b}@media (max-width:640px){.code-block-wrapper{border-radius:8px;margin:1rem 0}.code-content{padding:16px;font-size:.8em}.copy-button{opacity:.7;padding:4px 8px;font-size:.7rem;transform:translateY(0)}}