body{font-family:Arial,sans-serif;background:#f4f4f4;margin:0;padding:20px}.container{max-width:700px;margin:auto;background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 8px #0000001a}h1{text-align:center}.tabs{display:flex;justify-content:center;margin-bottom:20px}.tabs button{padding:10px 20px;border:none;background:#ddd;cursor:pointer;margin:0 5px;border-radius:4px}.tabs .active{background:#007bff;color:#fff}.card{display:flex;flex-direction:column;gap:10px}.card input,.card textarea{padding:10px;border:1px solid #ccc;border-radius:4px}.key-buttons{display:flex;gap:10px}.key-buttons button{position:relative}.action-btn{padding:12px;background:#28a745;color:#fff;border:none;border-radius:4px;cursor:pointer}.action-btn:disabled{background:#aaa;cursor:not-allowed}.output{margin-top:20px;position:relative}.output pre{background:#222;color:#0f0;padding:15px;border-radius:4px;overflow-x:auto;white-space:pre}.copy-btn{position:absolute;top:5px;right:5px;padding:5px 10px;border:none;background:#007bff;color:#fff;border-radius:4px;cursor:pointer}.output{position:relative;margin-top:20px;background-color:#1e1e1e;color:#d4d4d4;padding:15px;border-radius:8px;font-family:Fira Code,Consolas,Monaco,monospace;font-size:14px;overflow-x:auto;white-space:pre;max-height:400px;overflow-y:auto;border:1px solid #333}.output .string{color:#ce9178}.output .number{color:#b5cea8}.output .boolean,.output .null{color:#569cd6}.output .key{color:#9cdcfe}.copy-btn{position:absolute;top:10px;right:10px;background:#007acc;color:#fff;border:none;padding:5px 8px;border-radius:4px;cursor:pointer;font-size:12px}.tick{margin-left:5px;color:#32cd32;font-weight:700}