.example-box{border:1px solid #ddd;border-radius:4px;margin:20px 0;background:#fff;box-shadow:0 0 5px rgba(0,0,0,.05);overflow:hidden;font-family:Consolas,"Courier New",monospace}.example-header{display:flex;justify-content:space-between;align-items:center;background:#04aa6d;padding:6px 10px}.example-title{color:#fff;font-size:14px;font-weight:normal}.example-header button{background:none;border:0;color:#fff;font-size:12px;cursor:pointer;padding:4px 8px;transition:background .3s ease;border-radius:3px}.example-header button:hover{background:rgba(255,255,255,.2)}.example-content{display:flex;flex-wrap:wrap;gap:10px;padding:10px}.example-code{flex:1 1 60%;background:#f9f9f9;border:1px solid #e0e0e0;border-radius:4px;padding:10px;overflow-x:auto}.example-output{flex:1 1 35%;background:#f1f1f1;border:1px solid #e0e0e0;border-radius:4px;padding:10px;overflow-x:auto}.example-output h4{margin:0 0 5px;font-size:14px;color:#333}.example-code pre,.example-output pre{margin:0;font-size:14px}.example-box.collapsed .example-content{display:none}