.code-example{margin:24px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);min-width:0;max-width:100%}
.code-example-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--bg);font-size:12px;color:var(--muted)}
.code-example-label{font-weight:600;letter-spacing:.02em}
.code-copy{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:5px 12px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--text);font-size:12px;line-height:1.4;white-space:nowrap}
.code-copy:hover{border-color:var(--green);color:var(--green)}
.code-copy svg{width:15px;height:15px}
.code-example pre{margin:0;padding:20px;overflow-x:auto;max-width:100%;direction:ltr;text-align:left;tab-size:4;font:13px/1.8 Consolas,'Cascadia Code',monospace;scrollbar-width:thin}
.code-example pre code{padding:0;border:0;border-radius:0;background:none;color:var(--text);font:inherit;white-space:pre;overflow-wrap:normal;word-break:normal}
.code-example pre:focus-visible{outline:2px solid var(--green);outline-offset:-3px}
@media(max-width:480px){.code-example-bar{padding:9px 12px}.code-example pre{padding:16px;font-size:12px}.code-example-label{max-width:65%}}